请问,我有如下代码
<select id="rwid1">
<option id="1">首页</option>
<option id="2">次页</option>
<option id="3">末页</option>
</select>
<select id="rwid1">
<option id="1">首页</option>
<option id="2">次页</option>
<option id="3">末页</option>
</select>
<select id="rwid1">
<option id="1">首页</option>
<option id="2">次页</option>
<option id="3">末页</option>
</select>
请问如何获取每个 select 的选中项呢?
<script>
$('#rwid1').each(() => {
$(this).on('change', (e) => {
console.log(e.target)
})
})
</script>
自己已尝试用如上方法,但是只能获取到当前 select
实在不知道如何获取到每个 select 下的选中项呢?
还望指点,谢谢!
已解决
悬赏分:40
- 解决时间 2021-11-27 06:56
点赞 0反对 0举报 0
收藏 0
分享 0
回答4
最佳
-
把html中的select标签id改成class
$('.rwid1').each(function(){ $(this).on('change', (e) => { console.log(e.target.selectedOptions[0].value) }) })`
支持 0 反对 0 举报2021-11-27 02:31
-
ID选择器只会查询到第一个匹配的项, 即使$('#id').each()也只能获取到第一个匹配项.
如果必须要使用相同的ID来定义标签, 可以使用标签选择器$('select[id]').change(function() { console.log(this.value); });
当然即使使用该方法也不太好区分到底是哪个<SELECT>的值被改变了, 还需要一些辅助工具(使用索引标记/业务标记等等):
$('select[id]').change(function() { var $this = $(this); console.log($this.index()); // 1. 确定索引不会改变 // 或者通过业务标记来区分 // this.dataset.key $this.attr('data-key'); }); $('select[id]').each(function(){ // 2. select应该是动态生成的, 可以为每个select添加业务标记 $(this).attr('data-key', busUniqueKey); });
支持 0 反对 0 举报2021-11-27 03:52