Question

我想在用户输入5位数邮政编码后自动填写城市和州的价值。 Ajax部分工作得很好，问题是我在一个网页中有两组zip / city / state字段。我搜索了这个问题很长一段时间，使用next（），nextAll（）甚至是slice（），它们都不能在我的情况下工作。

网页相关部分：

<table>
    <tr>
        <td align="right" class="style3">ZIP:</td>
        <td>
            <asp:TextBox ID="tb_ZIP" runat="server" Width="100px"
            alt="zip5" class="zip"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td align="right" class="style3">City: 
            <td>
                <asp:TextBox ID="tb_City" runat="server" Width="100px"
                class="city"></asp:TextBox>
            </td>
            <tr>
                <td align="right" class="style3">State:</td>
                <td>
                    <asp:DropDownList ID="ddl_State" runat="server"
                    Width="100px" class="state"></asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td align="right" class="style2">ZIP:</td>
                <td>
                    <asp:TextBox ID="tb_AffiOrComZIP" runat="server"
                    Width="100px" alt="zip5" class="zip"
                    ontextchanged="tb_AffiOrComZIP_TextChanged">
                        <tr>
                            <td align="right" class="style2">City:</td>
                            <td>
                                <asp:TextBox ID="tb_AffiOrParCity" runat="server"
                                Width="100px" class="city"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="style2">State:</td>
                            <td>
                                <asp:DropDownList ID="ddl_AffiOrParComState"
                                runat="server" Width="100px" class="state">
                                </asp:DropDownList>
                            </td>
                        </tr>
                    </asp:TextBox>
                </td>
            </tr>
        </td>
    </tr>
</table>

JS：

$(".zip").each(function() {
    var zipTextBox = $(this);

    zipTextBox.keyup(function() {
        var zip = $(this).val();
        if (zip.length == 5) {
            $.post(rootPath + "/AjaxPages/DropdownData.aspx", {
                "inputValue": zip,
                "type": "zip"
            }, function(data) {
                var cityStr = $(data).attr("city");
                var stateStr = $(data).attr("state");
                $(this).nextAll(".city:first").val(cityStr); //this doesn't work
                for (var i = 0; i < $(this + ".state option").length; i++) { //this works for first
                    if ($(this + ".state").get(0).options[i].text == stateStr) {
                        $(this + ".state").get(0).options[i].selected = true;
                        break;
                    }
                }
            });
        }
    });
});

使用Ajax函数后，我获得了城市和州的返回值。对于每个城市文本框，我给出一个“城市”类，对于每个州的下拉列表，我给出一个“州”类。我想知道如何将这些价值放到正确的位置？任何帮助表示赞赏。提前谢谢。

Answer 1

在http://api.jquery.com/category/selectors/

查看：eq选择器

Answer 2

问题是类zip和city的元素不是兄弟姐妹。试试这个：

$(".zip").keyup(function() {
    var zipTextBox = $(this),
        zip = zipTextBox.val();
    if (zip.length == 5) {
        $.post(rootPath + "/AjaxPages/DropdownData.aspx", {
            "inputValue": zip,
            "type": "zip"
        }, function(data) {
            var $data = $(data),
                cityStr = $data.attr("city"),
                stateStr = $data.attr("state"),
                zipTr = zipTextBox.closest('tr'),
                cityTr = zipTr.next(),
                stateTr = cityTr.next();

            cityTr.find('.city:first').val(cityStr);
            stateTr.find('input:select.state > option:contains(' + stateStr ')').attr('selected', true);
        });
    }
});

不幸的是，你继续在你的问题中编辑标记，所以我对你需要遍历的实际HTML进行了一些猜测。

Jquery：如何使用class选择下一个第一个元素

网页相关部分：

JS：

2 个答案: