How to update 2 select boxes with same option using jquery mobile

[twcman]

Using jquery/jqm I need to add an option to 2 selectboxes. I can get one to update but not the other. How do I get the other one to update. Notice the S in the names/id's Whichever .append is listed 2nd is the one that is updated.

html:

<input type="button" name="Goal_WeightVar" id="Goal_WeightVar" value="doit">
<br>
<select name="grouplist" id="grouplist">
<option value="choose">Choose a Group</option>
<option value="#groupid#">option1</option>
</select>
<select name="groupslist" id="groupslist">
<option value="choose">Choose a Group</option>
<option value="#groupid#">option1</option>
</select>
script:

$('#Goal_WeightVar').live('click', function() {
var newgroupcode = $('<option value="11">11<option>');
$('#groupslist').append(newgroupcode).trigger("create");
$('#grouplist').append(newgroupcode).trigger("create");
$('#groupslist').selectmenu();
$('#groupslist').selectmenu('refresh');
$('#grouplist').selectmenu();
$('#grouplist').selectmenu('refresh');
});

JSFIDDLE

http://jsfiddle.net/ThMnq/1/

Chris Scott

 

[twcman]

Found the answer:
must use clone() to clone newgroupcode..

$('#Goal_WeightVar').live('click', function() {
var newgroupcode = $('<option value="11">11<option>');
$('#groupslist').append(newgroupcode).trigger("create");
$('#grouplist').append(newgroupcode.clone()).trigger("create");
$('#groupslist').selectmenu();
$('#groupslist').selectmenu('refresh');
$('#grouplist').selectmenu();
$('#grouplist').selectmenu('refresh');
});


Chris Scott

 

[jpadie]

you need to add a 'true' argument to clone also the inner elements and the events attached to the cloned object.