在这里链接到我的 fiddle jsFiddle
我正在尝试使用 jQuery 为选择构建选项并将它们添加到 2 个不同的选择中，这是我的标记和代码:
var selectValues = [{ "ownerid": " ", "name": " "}, { "ownerid": 123, "name":"Tom"}, { "ownerid": 345, "name": "Dick"}, { "ownerid": 888, "name": "Harry"}];
$.each(selectValues, function(key, value) {
var myoption = $("<option></option>")
.attr("value", value.ownerid)
.text(value.name);
$('#select1').append(myoption);
$('#select2').append(myoption);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Select 1</label>
<select id="select1"></select>
<label>Select 2</label>
<select id="select2"></select>
但是 'myoption' 仅附加到 1 个选择而不是另一个。
问题:如何在不声明相同变量的情况下将其附加到两者？
干杯!
这是预期的行为，您需要创建 .clone()对象并将其 append() 到第二个元素。
$.each(selectValues, function(key, value) {
var myoption = $("<option></option>")
.attr("value", value.ownerid)
.text(value.name);
$('#select1').append(myoption);
//Append cloned object
$('#select2').append(myoption.clone());
});
var selectValues = [{ "ownerid": " ", "name": " "}, { "ownerid": 123, "name":"Tom"}, { "ownerid": 345, "name": "Dick"}, { "ownerid": 888, "name": "Harry"}];
$.each(selectValues, function(key, value) {
var myoption = $("<option></option>")
.attr("value", value.ownerid)
.text(value.name);
$('#select1').append(myoption);
$('#select2').append(myoption.clone());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Select 1</label>
<select id="select1"></select>
<label>Select 2</label>
<select id="select2"></select>
另一种方法是使用单个选择器。
$.each(selectValues, function (key, value) {
var myoption = $("<option></option>")
.attr("value", value.ownerid)
.text(value.name);
$('#select1, #select2').append(myoption);
});
var selectValues = [{ "ownerid": " ", "name": " "}, { "ownerid": 123, "name":"Tom"}, { "ownerid": 345, "name": "Dick"}, { "ownerid": 888, "name": "Harry"}];
$.each(selectValues, function(key, value) {
var myoption = $("<option></option>")
.attr("value", value.ownerid)
.text(value.name);
$('#select1, #select2').append(myoption);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Select 1</label>
<select id="select1"></select>
<label>Select 2</label>
<select id="select2"></select>