jQuery-ajax如何批量替换select下的option选项

Question

比如我有一个用户组select下拉列表，当改变下拉选项（触发onchange事件）时，如果批量替换我下面的<select id="user1">、<select id="user2">、<select id="user3">...等多个select下拉列表里的选项，比如：

<div>
<select id="groupid" name="groupid" onchange="">
<option value="1">group1</option>
<option value="2">group2</option>
<option value="3">group3</option>
</select>
</div>
<div>
<select id="user1" name="user1"></select>
<select id="user2" name="user2"></select>
<select id="user3" name="user3"></select>
</div>

Answer 1

用jquery的load函数可以实现，首先在你每个select下面加个class，这个class主要是用jquery来批量处理，代码如下：

<div>
<select id="groupid" name="groupid" onchange="var url='ajax.php?groupid='+this.value;$('.userClass').load(url);">
<option value="1">group1</option>
<option value="2">group2</option>
<option value="3">group3</option>
</select>
</div>
<div>
<select id="user1" name="user1" class="userClass"></select>
<select id="user2" name="user2" class="userClass"></select>
<select id="user3" name="user3" class="userClass"></select>
</div>

在你的ajax.php里生成option字符串就可以了。

Answer 2

ajax响应的数据提前处理好：

 $data = array(
'<option value="xxx">xxx</option><option value="xxx">xxx</option>',
'<option value="xxx">xxx</option><option value="xxx">xxx</option>',
);

echo json_encode($data);

js循环一次，把元素赋给相应的select.

 $.each(data,function(i,o){
$('#user' + (i+1)).html(o);
})

Answer 3

用JS的轻量级模板解决比较优雅，推荐使用https://github.com/blueimp/JavaScript-Templates

从Ajax获得的数据即可这样置入模板：

 {% for (var i=0; i< data.length; i++) { %}
<option value="{%=data[i].value%}">{%=data[i].label$}</option>
{% } %}