【js】selector小记

最新推荐文章于 2026-06-06 08:10:37 发布

原创最新推荐文章于 2026-06-06 08:10:37 发布 · 1.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #html5 #selector

笔记同时被 3 个专栏收录

66 篇文章

订阅专栏

前端

26 篇文章

订阅专栏

code

22 篇文章

订阅专栏

本文详细介绍了如何通过JavaScript实现当Select组件的下拉选项改变时，动态显示所选选项的内容与值，并提供了jQuery和原生JavaScript两种方法进行优化。包括使用jQuery简化选择操作，以及解决原生代码中遇到的问题，如正确处理selected状态和避免选择项的唯一性冲突。

当selector值改变时，显示改后的option值：

<select id="seletor" onChange="route()">
	<option value="0">A</option>
	<option value="1">B</option>
	<option value="2">C</option>
</select>

function route(){
        var selector = document.getElementById("seletor");	
        var text = selector.options[selector.selectedIndex].text;
        var value = selector.options[selector.selectedIndex].value;
        alert(value + ":" + text);
}

PS： jQuery中：

var text = $("#selector")[0].options[$("#selector")[0].selectedIndex].text

select选中给定option text值的option（js换select选中的option项）：

最终版：

var selectVal = $("select#e-role option:contains(" + roleName + ")").val();
$("#e-role").val(selectVal);

代码说明：

jquery选择器 elem:contains(text)表示选择包含有text内容的所有elem元素，所以整个选择器表示选择id为e-role的select元素的子元素option，且option中包含roleName字符串，即根据option text或value来选择相应的option。

将select的value，即选中项value，赋值为目标option的value即可。

错误代码：
一开始用的如下，一是find option找不到；二是.attr("selected", true)设置后，select不会控制selected option唯一性，所以需要手动全部设false，但是又出现问题，显示的选中项和代码中selected并不一样，控制台看了一下，发现select.val()是默认第一个，于是弃用，改为设置val值。

// $("#e-role").find("option[text="+row.role+"]").attr("selected",true);