javascript - 使用 Jquery 选择下拉值

Question

请找到下面的代码，我必须动态获取下拉选择的值，但我没有得到它。

<div class='box' id='dispositions'>
    <div class='header'>Dispositions</div>
    <form>
        <select name='rebuttal'>
            <option value=''>---Rebuttals Count---</option>
                <option value='0'>0</option>
                <option value='2-3'>2-3</option>
                <option value='3 or greater'>3 or greater</option>
        </select>
    </form>    
</div>

为了实现这一目标，我使用下面的代码，但它没有给出预期的结果。

没有收到以下警报:-

$(document).ready(function(){
    $('#cc-panel-Disposition form [name=rebuttal]').change(function() {
    alert($("#cc-panel-Disposition form [name=rebuttal] option:selected").text());
  });  
});

在下面的代码中，我得到的是“rebVal”而不是选定的值。请在这里帮助我。

var rebVal = $('#cc-panel-Disposition [name=rebuttal]').find('option:selected').val();
//var test = $('#cc-panel-Disposition form [name=rebuttal] option:selected').val();
                formValues.rebVal = rebVal;//rebVal;

如果我需要提供更多信息，请告诉我。

Answer 1

你在选择器中几乎没有错误，首先你没有 id cc-panel-Disposition 而你有 dispositions 其次使用这个而不是使用相同的选择器再次在事件处理程序中。

<强> Live Demo

$('#dispositions form [name=rebuttal]').change(function() {  
     alert($(this).find(':selected').text());
});  

如果您不希望其他控件具有相同的名称，您可以使用名称选择器来绑定(bind)事件

$('[name=rebuttal]').change(function() { ....