jquery过滤器下拉菜单并设置选择不起作用

Question

我还是 JQuery、Javascript 的新手，但这就是我所拥有的：

这是我的脚本：

/* Check for zip code input */
$('#editZipCode').keyup(function() {

    var inputString = $('#editZipCode').val();

    if(inputString.length == 5) {   

    $.ajax({
        url: base_url+"/zip_code_search/"+inputString,

        success: function(data) {

            if(data.length > 0) {

                var parts = data.split(':');

                $('select[name="city"] option').filter(function() { return $(this).text() == parts[0]; }).prop('selected', true);
                $('select[name="state"] option').filter(function() { return $(this).text() == parts[1]; }).prop('selected', true);

            }else{

                $('select[name="city"] option[value="0"]').prop('selected', true);
                $('select[name="state"] option[value="0"]').prop('selected', true);

            }
        }

    });


    }else{
                $('select[name="city"] option[value="0"]').prop('selected', true);
                $('select[name="state"] option[value="0"]').prop('selected', true);
    }

});

这是我的html：

<form action="" method="">

 <input type="text" id="editZipCode" name="zip_code">

 <select id="StateOption" name="state">
   <option value="0">-Select-</option>
   <option value="AK">AK</option>
   <option value="AL">AL</option>
   <option value="AR">AR</option>
   <option value="AZ">AZ</option>
 </select>

 <select id="CityOption" name="city">
   <option value="0">-Select-</option>
   <option value="ADAK">ADAK</option>
   <option value="AKIACHAK">AKIACHAK</option>
   <option value="AKIAK">AKIAK</option>
 </select>

</form>

我面临的问题是它不会设置 CityOptions 下拉菜单的选定选项，StateOptions 下拉菜单工作正常。

当我输入邮政编码时，它会将 StateOption 下拉框设置为与从 ajax 调用返回的匹配但与 CityOption 不匹配的下拉框。

如果我将parts[0] 或parts[1] 记录到控制台，它们都会打印出与输入字段中输入的邮政编码匹配的城市/州，但它只会将 state 选项设置为匹配的值，而不是城市选项。

我只是在这里遗漏了一些明显的东西吗？

提前致谢！

附言如果那很重要，我正在使用http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js？

Answer 1

我对这行有点困惑：

.filter(function() { return $(this).text() == parts[0]; }) 因为我不完全理解你的意图。但无论如何我都会继续。

现在，如果没有工作示例，很难完全调试您的代码，但我将提供一个可能的解决方案，但主要是一种调试/测试您想要发生的事情的方法。

首先，我可能会将上面的行更改为：

$('select[name="city"] option[value="'+ parts[0] +'"]').prop('selected', true);

但这可能并不重要。

使用console.log 来测试你在正确的道路上发生了什么。如果您使用的是 chrome，我会在 var parts = data.split(':'); 之后添加一个 debugger; 这将导致您的代码在此处暂停，以便您可以进行一些测试（您需要打开开发人员工具）。在控制台选项卡中，您现在可以在代码中的那一点进行测试。所以你可以输入parts，它应该会打印出你的两个项目的数组。这种力量来自能够在控制台中进行如下测试：

$('select[name="city"] option[value="'+ parts[0] +'"]')

如果有匹配，这应该返回选项对象，如果没有，你会得到一个[]，这意味着 jQuery 查询了页面并且找不到匹配。如果确实有匹配项，那么您可以再次尝试该代码，除了最后的 prop('selected',true); 以查看它是否正常工作。

这有望帮助您能够在关键点进行调试并更多地了解 jQuery 正在做什么。您正在成为 jQuery 大师！