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>

Are you meant to be missing the period before the html in the second line? — Matt Gibson
– Matt Gibson, Commented Aug 15, 2011 at 15:30
We could do with seeing your HTML as well as your jQuery. Your code works fine for me in this jsFiddle I created, by the way. — Matt Gibson
– Matt Gibson, Commented Aug 15, 2011 at 15:33
Ideally, you should use $.append(). BTW are you sure result does not contain any broken html? — Salman Arshad
– Salman Arshad, Commented Aug 15, 2011 at 15:48
Even with your provided HTML, it still works. jsfiddle.net/r6C2p — a'r
– a'r, Commented Aug 15, 2011 at 16:29

genesis · Accepted Answer · 2011-08-15 16:47:48Z

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

answered Aug 15, 2011 at 16:47

genesis

51.1k20 gold badges99 silver badges127 bronze badges

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

1 Comment

genesis Over a year ago

@karim79: try to hardcore - I see hardcore, am I missing something?

Collectives™ on Stack Overflow

Populate Multiple Select Controls with the Same Values using jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related