A while ago I posted this question asking how to get JSON data into jQuery dropdowns jquery dropdown from mysql based on previous selection

Well the people here were awesome and I got a solution. The problem I'm having now is that the suggest solution dosen't work in my production enviorment but it does in my test.

In order to prevent duplicate entrees I am using jQuery empty() the problem is that using empty() seems to also be preventing me from selecting the first option.

this is the function that is generating the optiosn from JSON

function(data){

            var select = $('[name="employee_manager"]');
            select.empty();
            select.append(new Option(ucfirst('No Manager'),'100'));

            $.each(data, function(index, array) {

                    select.append(new Option(ucfirst(array['first_name'])+ " "+ucfirst(array['last_name']),array['id']));
            });

Is that an alternative to empty() that won't prevent selection?

EDIT This seems to only be a problem if there are fewer than two items being dynamically input
EDIT 2 Here is the HTML. It seems that I can't select the first option if empty() is present

     <label for="manager">Reports To</label>
     <select name="employee_manager">
          <option value="1">Please Select Employee Role</option>
          <option value="2">John Doe</option>
          <option value="3">James Smith</option>
    </select>

EDIT 3

Looks like the empty class is adding a span to my select

<div class="selector">
<span style="-moz-user-select: none;">Jane  Smith</span>
    <select name="employee_manager" style="opacity: 0;">
         <option value="100">No Manager</option>
</select>
</div>

EDIT 4
Okay so here is a jsfiddle that shows the problem. I couldn't get the JSON data to load correctly but you can still see the problem if you attempt to click on the first item in the list. It seems that it's a problem with uniformjs as if uniform is removed it's not a problem /

A while ago I posted this question asking how to get JSON data into jQuery dropdowns jquery dropdown from mysql based on previous selection

Well the people here were awesome and I got a solution. The problem I'm having now is that the suggest solution dosen't work in my production enviorment but it does in my test.

In order to prevent duplicate entrees I am using jQuery empty() the problem is that using empty() seems to also be preventing me from selecting the first option.

this is the function that is generating the optiosn from JSON

function(data){

            var select = $('[name="employee_manager"]');
            select.empty();
            select.append(new Option(ucfirst('No Manager'),'100'));

            $.each(data, function(index, array) {

                    select.append(new Option(ucfirst(array['first_name'])+ " "+ucfirst(array['last_name']),array['id']));
            });

Is that an alternative to empty() that won't prevent selection?

EDIT This seems to only be a problem if there are fewer than two items being dynamically input
EDIT 2 Here is the HTML. It seems that I can't select the first option if empty() is present

     <label for="manager">Reports To</label>
     <select name="employee_manager">
          <option value="1">Please Select Employee Role</option>
          <option value="2">John Doe</option>
          <option value="3">James Smith</option>
    </select>

EDIT 3

Looks like the empty class is adding a span to my select

<div class="selector">
<span style="-moz-user-select: none;">Jane  Smith</span>
    <select name="employee_manager" style="opacity: 0;">
         <option value="100">No Manager</option>
</select>
</div>

EDIT 4
Okay so here is a jsfiddle that shows the problem. I couldn't get the JSON data to load correctly but you can still see the problem if you attempt to click on the first item in the list. It seems that it's a problem with uniformjs as if uniform is removed it's not a problem http://jsfiddle/BandonRandon/xXUfp/1/

• javascript
• jquery
• json
• uniform
• pyrocms

• 1 What do you mean by 'selecting'? I see nothing in your code that 'selects' an element. – Kevin Commented Mar 20, 2011 at 7:55
• Sorry, I updated the question to include html that is doing the select. – Brooke. Commented Mar 20, 2011 at 8:14
• looks like data is ajax response, what type is data? json? – S L Commented Mar 20, 2011 at 8:19
• @experimenX, yes. My form is retretreving the ajax fine. It's just that without empty() each time I select the list is repropegated. and with empty() I can't choose the first option. – Brooke. Commented Mar 20, 2011 at 8:21

2 Answers 2

Don't use empty() to clear the options of drop down list. It's wrong, because it should be used to remove DOM children.

Instead use such code:

$("select[name='employee_manager'] > option").remove();

Edit: when using the jQuery uniform plugin, dynamically adding options is messing things up... one way around that does not require to go and try fix the plugin is to always have enough "dummy" options in place (e.g. 20 if that's the max amount of options) then change the text/value of those options and hide all others according to your data.
The proper JS code will now look like this:

var myData = [];
myData.push( { text: "Please Select A Manager (JS)", value: "null" } );
myData.push( { text: "No Manager", value: "100" } );
myData.push( { text: ucfirst("a third choice"), value: "42" } );
$.each(data, function(index, array) {
   myData.push( { text: ucfirst(array['first_name'])+ " " + ucfirst(array['last_name']), value: array['id'] } );
});

$("select[name='employee_manager'] > option").each(function(index) {
   if (index < myData.length) {
      $(this).text(myData[index]["text"]);
      $(this).val(myData[index]["value"]);                          
      $(this).show();
   }
   else {
        $(this).hide();
   }
});

Updated jsFiddle.

Crude, but working.... :)

Well try something like this, but no guaranteed

$('<option></option>').val(100).html('No Manager').appendTo($(select));

$.each(data, function(index, array) {
    $('<option></option>').val(array['id']).html(ucfirst(array['first_name'])+ " "+ucfirst(array['last_name']).appendTo($(select));
});