2

検索して検索しました..参照が見つかりません..しかし、これは明らかでなければなりません。

2 つの選択リスト

結果が 1 番目がオーストラリアの場合、2 番目のリストを保持する

オーストラリアでない場合は、2 番目のリストを入力ボックスに置き換えます。

オーストラリア以外を選択するとうまくいきます。しかし、もう一度オーストラリアを選択しても何も起こりません。

いくつかのデバッグアラートが機能しているかどうかを確認し、実際にヒンキーな結果が、探している div の値の最後のアラートになります。

いくつかの支援をいただければ幸いです。

前もって感謝します

PSフォーマットについて申し訳ありません-htmlコードを投稿に入れるのに時間がかかりました

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
            </head>

            <body>

            <h4>Shipping:</h4>
            <form id="_shipping" class = "shipping-form" method="post" action="payments">

             <Select name ='country' id='country'> 
             <option value='Australia'>Australia </option>
             <option value='USA'>USA </option>
             <option value='Canada'>Canada </option>
             </Select>
             <div id='states' class='states'>
             <select name='state' id='state' class = 'state'>
             <option value='NSW'>NSW </option>
             <option value='ACT'>ACT </option>
             <option value='WA'>WA </option>
             </select>
             </div>

             <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.min.js'> </script>
             <script type="text/javascript">
             $(document).ready(function() {
                 var bob = $('div#states').html();
                 $('#country').change(function() {
                     var brm = $('#country').val();

                     alert(bob);
                     if(brm === "Australia") {
                         alert('if '+brm);
                         alert('wtf: \r\n' +$('#states').html);

                        $('div#states').empty().html(bob);      //html(bob);


                     } else
                     alert('else '+brm);

                        $('div#states').html("Enter State: <input name = 'state' id = 'state'>");


                 });


                 });

              </script>

            </body>
            </html>
4

1 に答える 1

0

あなたの問題は、htmlをテキスト入力に設定すると、最初から持っていた選択リストがなくなることです。後で使用するために保存するか、Javascript から選択を作成するか、実際には削除しないようにすることができます。

「Javascriptを介して作成する」ソリューションは次のとおりです。

$("#country").change(function() {
    var brm = $(this).val();
    var output = ''; 
    if(brm === "Australia") {
        // Create "states" array
        var states = ["NSW", "ACT", "WA"];
        // Start select tag
        output = '<select name="state" id="state">';
        // Loop through all states and add the options
        for (var i = 0 ; i < states.length ; i++)
            output += '<option value="' + states[i] + '">' + states[i] + '</option>';
        // Close select tag
        output += '</select>';
    } else {
        // Create text input
        output = 'Enter State: <input name="state" id="state">';
    }
    // Set the output
    $('div#states').html(output);
}).trigger("change"); // Trigger the event, so that it runs on page load​​​

JsFiddle: http://jsfiddle.net/aebWm/

または、選択を保存してからリセットする場合：

var originalStates =  $('div#states').html();

$("#country").change(function() {
    if($(this).val() === "Australia") {
        $('div#states').html(originalStates)
    } else {
        $('div#states').html('Enter State: <input name="state" id="state">');
    }
});​
于 2012-10-13T02:54:23.770 に答える