如何解决组合框的更换事件?

时间:2014-10-27 12:26:19

标签: javascript jquery combobox

我有一个组合框,如何触发组合框的onchange事件并从中获取一个选定的值。

以下是我迄今所做的代码:

<select name="g1" id="select_g1">
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">three</option>
    </select>

    <script>
        $(document).ready(function(){

            $("select_g1").change(function(){
                alert("Handled"); // alert is not fired up ...
            });
        });

    </script>

编辑:如果我有多个组合框怎么办?

<select name="g2">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>

同时禁用在combobox g2中的组合框g1中选择的值。

有人可以告诉我代码有什么问题。

3 个答案:

答案 0 :(得分:2)

请尝试使用.on事件,而不是尝试使用.change事件。

您可以尝试使用它:

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

在此处查看 - &gt; http://jsfiddle.net/ocrozmkn/

编辑:

关于您编辑的问题,您可以尝试以下jQuery:

$('select').on('change', function (e) {
    $('select option').prop('disabled', false);
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;    
    alert(valueSelected);
    $("select option:contains('" + valueSelected + "')").attr("disabled","disabled");
});

在此处查看 - &gt; http://jsfiddle.net/ocrozmkn/1/

多个组合框的演示

见这里 - &gt; http://jsfiddle.net/ocrozmkn/6/

希望这有帮助!!!

答案 1 :(得分:0)

尝试

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>jQuery Autocomplete</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
    $(document).ready(function(){

        $("#select_g1").on("change",function(){
            alert($(this).val());
        });
    });

</script>
    </head>

    <body>

    <select name="g1" id="select_g1">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>



    </body>

    </html>

答案 2 :(得分:0)

尝试这样的事情:

<form class="demo">
<select name="g1" id="select_g1">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
</select>
</form>

<script>
 $("#select_g1").change(function () {
    var res = this.value;
    alert(res);
   //OR
    alert(this.value);
    });
</script>