jQuery select change event get selected选项

我在我选择的元素的变化事件上绑定了一个事件:

$('select').on('change', '', function (e) {


});

当发生更改事件时，我如何访问被选中的元素?

632585 次浏览
小开
最佳答案 
$('select').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
....
});
小开

你可以使用jQuery找到方法

 $('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();
});
小开

委托替代

如果有人使用委托方式作为监听器，则使用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');
}

JSFiddle Demo

小开

我觉得这样更短更干净。此外，如果有多个选定项，您可以迭代;

$('select').on('change', function () {
var selectedValue = this.selectedOptions[0].value;
var selectedText  = this.selectedOptions[0].text;
});
小开 
<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值时，您可以获得当前选择的值。

小开

另一种获取选定值的简便方法是，

$('#selectElement').on('change',function(){
var selectedVal = $(this).val();
^^^^  ^^^^ -> presents #selectElement selected value
|
v
presents #selectElement,
});
小开 
$('#_SelectID').change(function () {
var SelectedText = $('option:selected',this).text();
var SelectedValue = $('option:selected',this).val();
});
小开

见官方API文档 https://api.jquery.com/selected-selector/ < / p >

这是好事:

$( "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的select change事件来获取选中的选项值

For Demo

$(document).ready(function () {
$('body').on('change','#select', function() {
$('#show_selected').val(this.value);
});
}); 
<!DOCTYPE html>
<html>
<title>Learn Jquery value Method</title>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="select">
<option value="">Select One</option>
<option value="PHP">PHP</option>
<option value="jAVA">JAVA</option>
<option value="Jquery">jQuery</option>
<option value="Python">Python</option>
<option value="Mysql">Mysql</option>
</select>
<br><br>
<input type="text" id="show_selected">
</body>
</html>

小开

这也可以很好地工作

(function(jQuery) {
$(document).ready(function() {
$("#select_menu").change(function() {
var selectedOption = $("#select_menu").val()
});
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>


提交答案