更改事件不会触发选择列表答案

【问题标题】：On change event won't fire select list更改事件不会触发选择列表
【发布时间】：2012-05-14 09:44:54
【问题描述】：

我似乎无法让 jQuery 为 County_id 选择列表触发和 on change 事件。我已经尝试了多个代码 sn-ps 并且没有一个会触发 on change。有什么想法吗？

HTML：

<select id="county_id" name="county_id">
    <option value=""></option>
    <option value="1">Somewhere</option>
    <option value="2">Somewhere else</option>
</select>

<select id="vice_county_id" name="vice_county_id"></select>

JS：

$(function(ready) {
    $("#county_id").change(
            function() {
                $("#vice_county_id").html("");
                var co_id = $("#county_id > option[@selected]").attr("value");
                if (co_id != 0) {
                    $.getJSON('./vice_county_web_service.php?co_id=' + co_id,
                            function(data) {
                                $.each(data, function() {
                                    $("#vice_county_id").append(
                                            $("<option></option>").val(
                                                    this['value']).html(
                                                    this['name']));
                                });
                            });
                }
            });

});

【问题讨论】：

您在控制台上看到任何错误吗？

标签： javascript jquery html ajax cascadingdropdown

【解决方案1】：

事件正在触发，但是这行代码失败了：

var co_id = $("#county_id > option[@selected]").attr("value");

...因为这是一个无效的选择器。在浏览器的 JavaScript 控制台中，您应该会看到 Syntax error, unrecognized expression: [@selected]。

jQuery 很乐意为您提供价值，只需使用 val:

var co_id = $("#county_id").val();

Live example | source

【讨论】：

非常感谢，我很感激。下面的 mgraph 也是完整的 sn-p，输入也来自 T.J.如果我可以标记你们两个，我会的。再次感谢。

【解决方案2】：

刚好够得到选择框的值

var co_id = $("#county_id").val();

你应该使用on()

$('#county_id').on('change', function() {
  //....
  var co_id = $("#county_id").val(); 
});

【讨论】：

【解决方案3】：

尝试：

$(document).ready(function(){
    $("#county_id").change(function() {
        $("#vice_county_id").html("");
        var co_id = $(this).val();
        if(county_id != 0) {
            $.getJSON('./vice_county_web_service.php?co_id=' + co_id,function(data) {   
                $.each(data, function() {
                    $("#vice_county_id").append($("<option></option>").val(this['value']).html(this['name']));
                });
            });
        }
    });
})

【讨论】：

仍然有无效的选择器。
@T.J.Crowder 好的，我把它改成$(this).val();

【解决方案4】：

更改`var co_id = $("#county_id > option[@selected]").attr("value");' to 'var co_id = $("#county_id > option:selected").attr("value");'

http://jsfiddle.net/XvRsV/

【讨论】：

【解决方案5】：

您的代码运行良好意味着代码正在正确处理更改事件请参考link

$(function(ready){
            $("#county_id").change(function() {
                $("#vice_county_id").html("test");
                var co_id= $("#county_id").attr("value");
                alert('Value : ' +co_id); 
            if(co_id != 0) {
                $.getJSON('./vice_county_web_service.php?co_id=' + co_id,function(data) {    
                    $.each(data, function() {
                        $("#vice_county_id").append($("<option></option>").val(this['value']).html(this['name']));
                    });
                });
            }
        });

    });

只改变这一行，

var co_id= $("#county_id").attr("value");

只需检查您的 ajax 调用是否正常

【讨论】：

【解决方案6】：

 <select id="county_id" name="county_id" onchange="ChangeCountry();">

function ChangeCountry()
{
   var _countryId = $('#county_id').val();
}

【讨论】：