jquery - 如何使用 jquery mobile 更新 2 个具有相同选项的选择框

Question

使用 jquery/jqm 我需要向 2 个选择框添加一个选项。我可以更新一个，但不能更新另一个。我如何让另一个更新。请注意名称/id 中的 S 列出的第 2 个 .append 是更新的那个。

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>

脚本：

$('#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/

Answer 1

您需要使用clone()来制作对象的副本并添加不同的对象，因为一个对象不能存在于两个地方。

现场演示

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