使用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其次，使用它而不是在事件处理程序中再次使用相同的选择器。

现场演示

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

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

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

Answer 2

试试这个小提琴

$(document).ready(function(){
    $('#optionSelected').change(function() {
        alert($(this).val());
      });  
});

Answer 3

也许您应该尝试从ID中获取元素。

<div class='box' id='dispositions'>
    <div class='header'>Dispositions</div>
    <form>
        <select id='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(){
    $('#rebuttal').change(function() {
    alert($("#rebuttal option:selected").text());
  });  
});