如何确定在下拉列表中选择了哪些选项？
如何确定在下拉列表中选择了哪些选项？
提问于 2015-08-03 18:01:11
我有一个下拉的值菜单：
<select class="notifications-dropdown">
<option value="val1">Val4</option>
<option value="val2">Val3</option>
<option value="val3">Val2</option>
<option value="val4">Val1</option>
</select>我希望这样，当用户从下拉列表中选择其中一个选项时，该选项具有一个“selected”属性。例如，如果用户单击下拉列表并选择Val3，则DOM应更改如下：
<select class="notifications-dropdown">
<option value="val1">Val4</option>
<option value="val2" selected>Val3</option>
<option value="val3">Val2</option>
<option value="val4">Val1</option>
</select>不过，我不知道当用户选择一个选项时，要侦听哪些jQuery事件。我试着在.notifications-dropdown上侦听一个.notifications-dropdown事件，但是生成的事件对象没有给我任何选择选项的指示。如何确定在下拉列表中选择了哪些选项？
回答 5
Stack Overflow用户
回答已采纳
发布于 2015-08-03 18:06:51
您似乎在正确的轨道上的change事件。但问题是，change事件只是告诉您所选字段/选项已经更改，它和任何其他事件侦听器都不会提供值。
要获得值，您需要引用jQuery，如下所示：
$('.notifications-dropdown option:selected').text();或者，要获得所选选项的值，可以如下所示：
$('.notifications-dropdown option:selected').val();Stack Overflow用户
发布于 2015-08-03 18:04:25
只需在选择列表中使用.val()即可。
$('.notifications-dropdown').change(function() {
alert($(this).val());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="notifications-dropdown">
<option value="val1">Val4</option>
<option value="val2">Val3</option>
<option value="val3">Val2</option>
<option value="val4">Val1</option>
</select>
this当在jQuery回调中使用时，是事件发生的元素。
Stack Overflow用户
发布于 2015-08-03 18:04:15
你走在正确的轨道上：
// on Dom-ready
$(function() {
// bind the 'change' event
$('.notifications-dropdown').change(function() {
// $(this).val() will have the selected value
alert($(this).val());
}).change(); // fire it once on page-load if you need to do anything based on the current value
});用户选择新选项的操作将修改DOM元素的selected属性--您不需要通过编程方式这样做。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31793810
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号