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


jquery Filter dropdown and set selected not working

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

这是我的脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* 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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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，但它只会将state选项设置为匹配的值，而不是城市选项。

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

提前致谢！

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

我对这行有点困惑：

.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 大师的路上！

相关讨论