Question

我在select元素的change事件上绑定了一个事件：

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

});

如何在发生更改事件时访问已选择的元素？

Answer 1

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
});

Answer 2

您可以使用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();
   });

Answer 3

委托替代

如果有人使用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');
}

<强> JSFiddle Demo

Answer 4

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

$('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});

Answer 5

<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值时获取当前选定的值。

Answer 6

获取所选值的另一种简短方法，

$('#selectElement').on('change',function(){
   var selectedVal = $(this).val();
                       ^^^^  ^^^^ -> presents #selectElement selected value 
                         |
                         v
               presents #selectElement, 
});

Answer 7

$('#_SelectID').change(function () {
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
});

Answer 8

这也可以正常工作

(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>

Answer 9

请参阅官方API文档 https://api.jquery.com/selected-selector/

这很好：

let uid = fireBaseUser.uid; 
//get a reference to the database
let database = firebase.database();
let ref = database.ref("users/").child(uid).child("devices"); 
ref.on("value", getData);

function getData(data) // may need to place this before the code above
{ 
  currentDevice = Object.keys(data.val())[0];
  console.log("current device: " + currentDevice); 
  let deviceRef = database.ref("devices/").child(currentDevice);

  // no need to listen to this, as a change in one device would fire 
  // for every user. you probably don't want that. 
  deviceRef.once("value", (data) { 
    console.log(data);
  });
}

和

$( "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(); 
});

Answer 10

您可以使用此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>

jquery选择更改事件获取选定选项

10 个答案:

委托替代