$('select').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
....
});
您可以使用 jQuery find 方法
$('select').change(function () {
var optionSelected = $(this).find("option:selected");
var valueSelected = optionSelected.val();
var textSelected = optionSelected.text();
});
上述解决方案完美运行,但我选择为愿意获得点击选项的他们添加以下代码。即使此选择值未更改,它也允许您获取所选选项。 (仅使用 Mozilla 测试)
$('select').find('option').click(function () {
var optionSelected = $(this);
var valueSelected = optionSelected.val();
var textSelected = optionSelected.text();
});
option
事件是一个冒险的提议,尤其是在移动设备上。例如,Webkit 不正确支持此事件:bugs.chromium.org/p/chromium/issues/detail?id=5284
委托替代
如果有人将 delegated approach 用作他们的侦听器,请使用 e.target
(它将引用 select 元素)。
$('#myform').on('change', 'select', function (e) {
var val = $(e.target).val();
var text = $(e.target).find("option:selected").text(); //only time the find is required
var name = $(e.target).attr('name');
}
<select id="selectId">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
$('#selectId').on('change', function () {
var selectVal = $("#selectId option:selected").val();
});
首先创建一个 select option
。之后使用 jquery
,您可以在用户更改 select option
值时获取当前选择的值。
我觉得这个更短更干净。此外,如果有多个,您可以遍历选定的项目;
$('select').on('change', function () {
var selectedValue = this.selectedOptions[0].value;
var selectedText = this.selectedOptions[0].text;
});
selectedOptions
并非在所有浏览器中都可用。
this.options[ this.options.selectedIndex ]
。 Mozilla 表示 Firefox 从 26 开始支持,IE 不支持。
$('#_SelectID').change(function () {
var SelectedText = $('option:selected',this).text();
var SelectedValue = $('option:selected',this).val();
});
另一种获取选定值的值的简短方法,
$('#selectElement').on('change',function(){
var selectedVal = $(this).val();
^^^^ ^^^^ -> presents #selectElement selected value
|
v
presents #selectElement,
});
这也可以正常工作
(function(jQuery) { $(document).ready(function() { $("#select_menu").change(function() { var selectedOption = $("#select_menu").val() }); }) ; })(jQuery);
请参阅官方 API 文档 https://api.jquery.com/selected-selector/
这个好作品:
$( "select" ).on('change',function() {
var str = "";
// For multiple choice
$( "select option:selected" ).each(function() {
str += $( this ).val() + " ";
});
});
和
$( "select" ).on('change',function() {
// For unique choice
var selVal = $( "select option:selected" ).val();
});
并容易做出独特的选择
var SelVal = $( "#idSelect option:selected" ).val();
您可以使用此 jquery 选择更改事件来获取选定的选项值
$(document).ready(function () { $('body').on('change','#select', function() { $('#show_selected').val(this.value); }) ; });
$("selector", this)
您在this
的上下文中找到所有selector
元素。写$("selector", this)
与$(this).find('selector')
几乎相同$()
是jQuery()
的别名,您可以在此处找到文档:api.jquery.com/jQuery 声明的签名显然是jQuery( selector [, context ] )
。 @Bellash:如果它“几乎相同”,有什么区别?或者什么更快?我更喜欢.find()
,因为这更 OO IMO....find()
的速度大约快 10%:stackoverflow.com/a/9046288/2767703