Trying to dynamically add options to an array of HTML select fields Php/AJAX/jQuery

Question

I have an HTML array of 10 select fields that must be populated by jQuery each time the div-popup is called. (Each one gets the same options) We have periodic needs for hundreds of employees and this form is intended to allow requests staffing to be forwarded to upper management for approval in a batch fashion by department. I’ll be using .serialize to submit the form but I am unclear as to how to initialize this element with the proper information for input selection. All the info I could find was about submitting the form array, which I already knew how to do.

Here is the HTML structure:

<select id="detJobsCR[]" name="detJobsCR[]"> </select>

And here is my attempt to populate the selection fields:

$.post("events.php",{a: 'detadd-joblist', dept_id: deptID}, function(data) {
    for(var i=0;i<10;i++){
        $('#detJobsCR[i]').html(data);
    }   
});

(I tried explicitly defining each elements array position [0],[1]..etc and that did not help.)

The data returned is simple HTML like:

<option value='38'>Admin Support Assistant I</option>
<option value='39'>Admin Admin Support Assistant II</option>...

Thanks for whatever assistance you can offer!

FYI Update: Musa's answer worked perfectly. I also had issues with Date & Time pickers not working, it turns out, for the same reason. When I converted them to classes I was able to use this(below), and the are all now working as well:

$(".detDateStart").datepicker();

Musa · Accepted Answer · 2013-02-20 23:50:24Z

3

Ids should be unique so each select should have its own id. If you want to have one identifiier to represent all the selects you could use a class e.g. <select class="detJobsCR" name="detJobsCR[]"> </select> and then select them with $('.detJobsCR') and set their html with .html(data)

$.post("events.php",{a: 'detadd-joblist', dept_id: deptID}, function(data) {
    $('.detJobsCR').html(data);
});

answered Feb 20, 2013 at 23:50

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eli Gassert Over a year ago

+1. My answer is just for additional clarification about what's wrong with his current code and assumptions. I would mark this as the answer.

Eli Gassert · Accepted Answer · 2013-02-20 23:56:07Z

2

Your problem is two fold:

You're putting i inside your quotes, so it's not interpreting the value of the variable i
Even if i wasn't inside the quotes, when jquery parses the [i] in the expression it's looking for elements with id detJobsCR and with attribute i defined.

Since you have only ONE element, with ID detJobsCR[] you would query it like this: $('#detJobsCR\\[\\]') You need to escape the [ and ] character so jquery knows it's a part of the ID and NOT a parsing rule (for parsing/looking for an attribute).

As suggested by Musa, you can make your life much easier by using a simple class name that doesn't require escaping values. But if you do want to select by id, the example above should do the trick.

answered Feb 20, 2013 at 23:56

Eli Gassert

9,7713 gold badges33 silver badges40 bronze badges

1 Comment

Rick Savoy Over a year ago

Thank you very much for this info. It helps my understanding a great deal. There is more information associated with each job request that are also array elements. These are all text fields though so not as challenging to understand. I'll be fixing those as well. Thanks!

Collectives™ on Stack Overflow

Trying to dynamically add options to an array of HTML select fields Php/AJAX/jQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related