0

ListViewドロップダウン、4つのテキストボックスとボタンを含むがあります。value=2ドロップダウンがの各行にある場合にのみ、4番目のテキストボックス(スパンで囲まれている)を表示しようとしていListViewます。

たとえば、に5つのレコードが表示されListView、2番目と3番目は両方ともvalue=2

これは私のdocument.readyitプリセットにあり、ページの読み込み時にドロップダウンの各値を選択します。ですから、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' });
}
});

ドロップダウンの選択が変更された場合もテキストボックスを表示する必要があります。以下を参照してください。これを試してみましたが、最初のテキストボックスでのみ機能します。たとえば、5番目のレコードのvlaueを変更すると、5ZipBox番目の行ではなく最初の行に表示されます。

$('.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>
4

1 に答える 1

0

入力は(でvisibility)切り替えることができるのでスパンは必要ありませんが、スパンを切り替えるか入力するclassには、代わりに属性が必要になりますid(idは一意であると想定されているため#ZipBox、複数のzipフィールドに使用することはできません)

jsfiddleデモ

最初のパス(.each())で、これによりzipの可視性が設定されます。ドロップダウンの値を属性に設定する部分についてコメントしました。これは、次のdataチェックを中断するためです。value = 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'});
    }
});

変更イベントの場合、ほぼ同じことができますが、選択されているelse {}場合はブロックを追加し、MEX変更する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'});
    }
});
于 2013-03-07T16:13:15.653 に答える