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

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

晚风撩人 发布于 2017-01-13 字数 724 浏览 1283 回复 3

比如我有一个用户组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>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

浮生未歇 2017-10-16 3 楼

用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字符串就可以了。

虐人心 2017-07-10 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);
})

想挽留 2017-01-16 1 楼

用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>
{% } %}