Javascript 列表视图中的文本框

我有一个

列表视图

，其中包含一个下拉列表、4个文本框和按钮。我希望仅当

列表视图的每一行的下拉列表为
value=2
时，才显示第四个文本框（用span括起来）

例如，我有5条记录显示在
列表视图中，第2条和第3条都是
value=2

这在我的
文档中。ready
在页面加载时预设并选择下拉列表的每个值。因此，我尝试在ZipBox运行时显示它，因为我觉得这将是最简单的，但我也愿意接受其他建议，因为显示该框似乎不起作用

$('.Existing').each(function() {
    var select = $(this).attr('data');
    $(this).val(select);
    //this part doesn't work below
    if(select=="2")
    {
        $('#zipBox').css({ 'visibility': 'visible' });
}
});

我还需要显示文本框，如果下拉选择被更改，请参见下面的尝试，但它只适用于第一个。例如，如果我更改第五条记录的值，它将使
ZipBox
在第一行而不是第五行可见

$('.Existing').change(function() {
    if ($(this).val() == '2') {
        $('#ZipBox').css({ 'visibility': 'visible' });
    }
});

以下是列表视图：

<asp:ListView runat="server" ID="ListView1">
    <LayoutTemplate>
        <table id="tablesorter" style="border: solid 1px black; width: 55%;">
            <thead>
                <tr>
                    <th>
                        <a href="#">Country</a>
                    </th>
                    <th>
                        <a href="#">Info.</a>
                    </th>
                    <th>
                        <a href="#">Action</a>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr id="itemPlaceholder" runat="server" />
            </tbody>
            <tfoot>
            </tfoot>
        </table>
    </LayoutTemplate>
    <ItemTemplate>
        <tr>
            <td>
                &nbsp;&nbsp;<select id="Existing" data="<%# Eval("Type").ToString()%>"
                    class="Existing" style="width: 90px">
                    <option value="0">USA</option>
                    <option value="1">CAN</option>
                    <option value="2">MEX</option>
            </td>
            <td>
                <input size="4" type="text" id="city" value="<%# Eval("City")%>" />
                <input size="4" type="text" id="state" value="<%# Eval("State")%>" />
                <input size="4" type="text" id="Phone" value="<%# Eval("PhoneNbr")%>" />
                <span id="ZipBox" style="visibility: hidden">
                    <input maxlength="5" size="5" type="text" id="zip" value="<%# Eval("ZIP")%>" />
                </span>
            </td>
            <td>
                <2 buttons here>
            </td>
        </tr>
    </ItemTemplate>
</asp:ListView>


美国
可以
墨西哥
可以切换输入（具有
可见性
），因此不需要span，但要切换span或输入，需要使用
类
属性，而不是
id
（id应该是唯一的，因此对多个zip字段使用
#ZipBox
）


在您第一次通过（
.each（）
）时，这将设置zip可见性，我对将下拉列表的值设置为
数据
属性的部分进行了注释，因为这将中断对
值=2
的检查

$('.Existing').each(function () {
    var $this = $(this), // drop down
        $thisRow = $this.closest('tr'), // the drop down's row
        $thisZip = $thisRow.find('.zip'), // the zip textbox on the same row
        $thisDataType = $this.attr('data'); // data attribute contains the type

    //$(this).val(select); // type is being set to the value

    if ($this.val() == 2) {
        $thisZip.css({'visibility': 'visible'});
    }
});

对于更改事件，您可以执行几乎相同的操作，但是如果选择了
MEX
，则添加了
else{}
块，然后更改
zip
将再次隐藏

$('.Existing').change(function () {
    var $this = $(this), // the drop down that changed
        $thisRow = $this.closest('tr'), // the drop down's row
        $thisZip = $thisRow.find('.zip'); // the zip textbox on the same row

    if ($this.val() == 2) {
        $thisZip.css({'visibility': 'visible'});
    } else {
        $thisZip.css({'visibility': 'hidden'});
    }
});

令人惊叹的！！！谢谢我想知道切换，因为如果你改变到一个，但你点击了错误的东西，意味着其他的东西，它怎么能改变回来。真棒