Populate Multiple Select Controls with the Same Values using jQuery

Question

I have two select controls that I want to populate with the exact same options.

I started with the following code (which does not work):

var result = // raw <option></option> html from ajax call

$("#selImbServiceType").html(result);
$("#selRemitImbServiceType").html(result);

If I comment out either of the statements above then the one left works, but when they are both uncommented only the first one works.

Then I changed the code to the following (this works as expected):

var result = // raw <option></option> html from ajax call

$("#selImbServiceType,#selRemitImbServiceType").html(result);

The second version populates both controls.

I am using jQuery 1.4.4 with Firefox 5.0.1

Any idea why the first version does not work?

result variable HTML

Here is the contents of the result variable:

<option value="27b3dc65-d60c-46e3-8d9c-bdffad8bc25f">Return To Sender</option>
<option value="bcf435c9-d197-4a54-8d90-f4507c2ac505">Shred And Return Electronically</option>

Surrounding HTML

<div style="overflow:auto;width:100%;">
  <div style="float:left;width:50%">
    <span class="dialogControlLabel">Client</span>
    <br />
    <select id="listClients" onchange="clientSelectionChanged()"></select>
    <span id="spanClientsLoading" style="display:none;"><img src="/Theme/Images/ajax-loader-fb.gif" alt="loading" width="16" height="11" /></span>
    <br />
    <br />
    <span class="dialogControlLabel">IMB Service Type</span>
    <br />
    <select id="selImbServiceType" name="imbServiceType"></select>
    <br />
    <br />
    <span class="dialogControlLabel">Stream Name</span>
    <br />
    <input id="txtStreamName" type="text" maxlength="128" name="streamName" />
    <br />
    <br />
    <span class="dialogControlLabel">Processor Module</span>
    <br />
    <input id="txtProcessorModule" type="text" maxlength="256" name="processorModule"/>
    <br />
    <br />
    <span class="dialogControlLabel">Advanced Location Logic Enabled</span>
    <br />
    <select id="selAdvancedLocationLogicEnabled" name="advancedLocationLogicEnabled">
      <option value="1">Yes</option>
      <option value="0">No</option>
    </select>
    <br />
    <br />
    <span class="dialogControlLabel">Force Mail Enabled</span>
    <br />
    <select id="selForceMailEnabled" name="forceMailEnabled">
      <option value="1">Yes</option>
      <option value="0">No</option>
    </select>
  </div>
  <div style="float:right;width:50%">
    <span class="dialogControlLabel">File Stream Configuration</span>
    <br />
    <select id="selFileStreamConfig"></select>
    <br />
    <br />
    <span class="dialogControlLabel">Remit IMB Service Type</span>
    <br />
    <select id="selRemitImbServiceType" name="remitImbServiceType"></select>
    <br />
    <br />
    <span class="dialogControlLabel">NCOA Enabled</span>
    <br />
    <select id="selNcoaEnabled" name="ncoaEnabled">
      <option value="1">Yes</option>
      <option value="0">No</option>
    </select>
    <br />
    <br />
    <span class="dialogControlLabel">Skip Logic Enabled</span>
    <br />
    <select id="selSkipLogicEnabled" name="skipLogicEnabled">
      <option value="1">Yes</option>
      <option value="0">No</option>
    </select>
    <br />
    <br />
    <span class="dialogControlLabel">Active</span>
    <br />
    <select id="selActive" name="active">
      <option value="1">Yes</option>
      <option value="0">No</option>
    </select>
  </div>
</div>

Answer 1

Well, I would maybe try to update your jQuery version.

See this example

I'm using jQuery 1.5 and it's working

EDIT: weird, it works with 1.4.4, too

I'd try to look on ajax result, if it's exactly same and you could also try to hardcore your ajax result