0

1）ページにオプション「クレジットカード」と「請求書/直接請求書」のドロップダウンリストがあります。「請求書/直接請求書」の選択では、「クレジットカード」の選択以外に何もする必要はありません: 2) radiobuttonlist (Panel:Panel2 内) を表示/非表示にする必要があります。これには 3 つのオプション (チェックイン日、予約日、その他の日付) があります。3) radiobuttonlist の「その他の日付」オプションをクリックすると、私はPanel :Panel3 内にある Textbox を表示する必要があります。4) radiobuttonlist の「チェックイン日」または「予約日」オプションをクリックすると、Panel3 内にあるテキスト ボックスを非表示にする必要があります。

私の4つのシナリオはすべて機能しています。問題：ドロップダウンリストで「クレジットカード」を選択し、ラジオボタンリストで「その他の日付」オプションを選択し、テキストボックスに値「10」を入力して送信ボタンをクリックすると、ポストバックが発生し、値がDBに保存されます。ページをリロードすると:ドロップダウンリストに「クレジットカード」、ラジオボタンリストに「クレジットカード」オプションが表示されますが、値15のテキストボックスが表示されません.「チェックイン日」/「予約日」を選択すると、次に「その他の日付」、値が 15 のテキスト ボックスが表示されます。コードは次のとおりです。

<script type="text/javascript">
$(function () {
    $('select[id$=ddlCardType]').change(function () {
        if (this.value == -1) {
            $('div[id$=Panel1]').show();
            $('div[id$=Panel2]').hide();
            $('div[id$=Panel3]').hide();
        }
        else {
            $('div[id$=Panel1]').hide();
            $('div[id$=Panel2]').show();
        }
    }).change();

});
</script>
<script type="text/javascript">
$(document).ready(function () {
    var panel = $("#Panel3");
    var cbo = $("#Panel2").find("cboVisibility");
    $("#cboVisibility").find('input:radio').change(function (index) {
        //$("#Panel2 cboVisibility").find('input:radio').change(function (index) {
        //$("[id*=pnl2 cboVisibility input:radio]").change(function (index) {
        if ($(this).val() == "OD")
            panel.show();
        else
            panel.hide()
    });
    $('#cboVisibility').find('input:radio').trigger('change');
});
</script>
<asp:DropDownList ID="ddlCardType" runat="server" CssClass="arial11nr" Width="270px">
    <asp:ListItem Value="-1">Invoice/Direct Bill</asp:ListItem>
    <asp:ListItem Value="SUCC">Credit Card</asp:ListItem>
</asp:DropDownList>
<td align="left" valign="top">
    <asp:Panel ID="Panel1" runat="server" Style="display: none;">
        <strong>Billing Instructions/Notes</strong><span class="red-color">(optional)  
</span>
        <asp:TextBox ID="txtBillingInstructions" runat="server" TextMode="MultiLine">
 </asp:TextBox>
    </asp:Panel>
    <asp:Panel ID="Panel2" runat="server" Style="display: none;" ClientIDMode="Static">
        <asp:RadioButtonList ID="cboVisibility" CssClass="Normal" runat="server" 
 RepeatDirection="Vertical"
            ClientIDMode="Static">
            <asp:ListItem Value="CD" Selected="True">Check-In Date</asp:ListItem>
            <asp:ListItem Value="BD">Book Date</asp:ListItem>
            <asp:ListItem Value="OD">Other Date</asp:ListItem>
        </asp:RadioButtonList>
    </asp:Panel>
    <asp:Panel ID="Panel3" runat="server" Style="display: none;" ClientIDMode="Static">
        <strong>Charge</strong>
        <asp:TextBox ID="txtSUCCValidity" runat="server" ClientIDMode="Static" 
Width="50px"></asp:TextBox>
        <strong>Days Before Check-In</strong>
        <asp:RangeValidator ID="RangeValidator1" runat="server" 
ControlToValidate="txtSUCCValidity"
            ErrorMessage="<br />Not valid Range" MaximumValue="999"  
ValidationGroup="update"
            MinimumValue="0" Type="Integer" Display="Dynamic"></asp:RangeValidator>
    </asp:Panel>
</td>

助けていただければ幸いです

4

2 に答える 2

0

あなたが見ている行動は理にかなっています。デフォルトでは、panel2 は非表示になっています。js コードは、ラジオ ボタンが変更イベントをトリガーし、それも 3 番目のオプションを選択する変更をトリガーする場合にのみ、パネルを表示します。フォームを送信した後にページを読み込むと、ドキュメントの準備が整う前に、ラジオ ボタンが 3 番目のオプションに設定されます。つまり、変更イベントをサブスクライブできるようになる前です。これが、デフォルトでテキストボックスが表示されない理由です。

シナリオを有効にするために何を変更する必要があるかは、ラジオ ボタンの値の設定方法によって異なります。

1 つの解決策は、ドキュメントの準備ができたときに変更イベントをトリガーすることです。そのようです

$(document).ready(function () {
    var panel = $("#Panel2");
    var cbo = $("#Panel1").find("cboVisibility");
    $("#cboVisibility").find('input:radio').change(function (index) {

        // when triggering a change across all radio inputs, even 
        // those that are not selected will show up here. 
        // hence the check to verify if they are actually selected. 
        if (this.value == "OD" && this.checked) {  
            panel.show();

        // we wand to hide the panel3 only if an option other
        // than "OD" is selected.
        } else if (this.checked) {
            panel.hide(); 
        }
    });

    // this will trick the browser into thinking that you selected the third option
    $('#cboVisibility').find('input:radio').trigger('change');
});
于 2012-07-05T06:53:07.280 に答える
0 
<script type="text/javascript">
var panel = $("#Panel3");
var cbo = $("#Panel2").find("cboVisibility");

$(document).ready(function () {
    //var ddlCardType = "<%=ddlCardType.ClientID %>";
    if ($('[id*=ddlCardType]>option:selected').val() == "SUCC" &&    
$('[id*=cboVisibility] :checked').val() == "OD") {
        panel.show();
    }
});


$('select[id$=ddlCardType]').change(function () {
    if (this.value == -1) {
        $('div[id$=Panel1]').show();
        $('div[id$=Panel2]').hide();
        $('div[id$=Panel3]').hide();
    }
    else {
        $('div[id$=Panel1]').hide();
        $('div[id$=Panel2]').show();
        if ($('[id*=cboVisibility] :checked').val() == "OD")
            panel.show();
    }
}).change();



$("#cboVisibility").find('input:radio').change(function (index) {
    //$("#Panel2 cboVisibility").find('input:radio').change(function (index) {
    //$("[id*=pnl2 cboVisibility input:radio]").change(function (index) {
    if ($(this).val() == "OD")
        panel.show();
    else
        panel.hide()
});
于 2012-07-06T11:52:32.920 に答える