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返回的下拉框相匹配。

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

我只是错过了一些明显的东西吗？

提前致谢！

P.S。如果那很重要，我正在使用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，我会在debugger;之后添加var parts = data.split(':');这将导致您的代码暂停，以便您可以进行一些测试（您需要打开开发人员工具）。在控制台选项卡中，您现在可以在代码中进行测试。因此，您可以键入parts，它应该打印出两个项目的数组。这种力量来自于能够在控制台中测试这样的东西：

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

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

这应该有助于您在关键点进行调试并更多地了解jQuery正在做什么。你正在成为一名jQuery大师！

jquery过滤器下拉列表并设置选中不起作用

1 个答案: