Question

我有2个下拉选择框，一个是静态的术语，另一个是静态JSON，但现在是动态的。我试图在下拉框中反映正确的值，但是两个下拉框中都出现了regoin / country？。

我的地区出现在条款和地区。我设置了id标签，但JS忽略了它们，只是把它扔给了两个。

HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<form action="" method="post">
username:<br>
<input type="text" name="username" value="Mickey">
<br>
domain:<br>
<input type="text" name="domain" value="domain.com">
<br>
term:<br>
        <select name="dexpr">
        <option value="2">2 yr</option>
        <option value="1" selected>1 yr</option>
</select>
<br>
plan:<br>
<input type="text" name="plan" value="">
<br>
servername:<br>
<input type="text" name="servername" value="">
<br>
<br>
<select name = "DCID" id= "DCID">
<option value="None" selected="Selected">Location</option>
</select>
<br>
member id:<br>
<input type="text" name="member_id" value="">
<br>
<br>
<input type="radio" name="provision" value="1">Provision domain?
<br>
<br>
<input type="submit" value="Submit">
</form>

JS：

var obj = {
    DCID:[
        {"6":{"DCID":"6","name":"Atlanta","country":"US","continent":"North America","state":"GA"},"2":{"DCID":"2","name":"Chicago","country":"US","continent":"North America","state":"IL"},"3":{"DCID":"3","name":"Dallas","country":"US","continent":"North America","state":"TX"},"5":{"DCID":"5","name":"Los Angeles","country":"US","continent":"North America","state":"CA"},"39":{"DCID":"39","name":"Miami","country":"US","continent":"North America","state":"FL"},"1":{"DCID":"1","name":"New Jersey","country":"US","continent":"North America","state":"NJ"},"4":{"DCID":"4","name":"Seattle","country":"US","continent":"North America","state":"WA"},"12":{"DCID":"12","name":"Silicon Valley","country":"US","continent":"North America","state":"CA"},"7":{"DCID":"7","name":"Amsterdam","country":"NL","continent":"Europe","state":""},"25":{"DCID":"25","name":"Tokyo","country":"JP","continent":"Asia","state":""},"8":{"DCID":"8","name":"London","country":"GB","continent":"Europe","state":""},"24":{"DCID":"24","name":"Paris","country":"FR","continent":"Europe","state":""},"9":{"DCID":"9","name":"Frankfurt","country":"DE","continent":"Europe","state":""},"19":{"DCID":"19","name":"Sydney","country":"AU","continent":"Australia","state":""}}
    ]
};

for(var i=0;i<obj.DCID.length;i++){
    var option=$('<option></option>').text(obj.DCID[i]['6']['continent']);
    $('select').append(option);
}

LIVE： JSFiddle

如何正确隔离2个列表/集？地区

Answer 1

问题是您将 select 设置为选择器。
您应该使用selectbox id属性作为选择器。

而不是：

$('select').append(option);

使用此：

$('#DCID').append(option);

作为附注 - 如果可能的话，你不应该修改内部循环的DOM。

var options = '';
for(var i=0;i<obj.DCID.length;i++){
    options += '<option value="'+obj.DCID[i]['6']['DCID']+'">' + obj.DCID[i]['6']['continent']+ '</option>';
}
$('#DCID').append(options);

Answer 2

问题出在这一行：

  $('select').append(option);

你告诉jquery在你的DOM中找到所有选择并附加选项。

选择您想要的ID，然后使用：

$('#myRegion').append(option);

此时，jQuery只会将选项附加到一个选择。我希望有帮助

为什么动态<option>会附加到两个下拉框？

2 个答案: