0

フォームを作成していますが、選択した国に応じて 2 つのフォーム フィールドを切り替える必要があります。米国の州の選択ドロップダウンと州の入力フィールドの 1 つ。それらは並んで構築されており、国がたとえばアフリカに変わると、いつでも入力フィールドが表示されます。米国を選択すると、[米国の選択] ドロップダウンが表示されます。以下は、HTML の簡単な例です。

<ul>
 <li><label>Country</label><select name="country"></li>
 <li><label>State/Province</label><select name="state"><input name="state"></li>
</ul>

ここに私のjqueryがあります。

$("#billing_info select[name='state']").css('display', 'none');
$("#billing_info input[name='state']").css('display', 'none');
$("#billing_info select[name='country_code']").change(function () {
    if ($("select[name='country_code']") == "USA") {
        $("select[name='state']").css('display', 'visible');
        $("input[name='state']").prop('disabled', false);
    }
    else {
        $("input[name='state']").css('display', 'visible');
        $("select[name='state']").prop('disabled', false);
    }
});

これを実際に機能させるのに問題があります。この機能を適切に動作させるには、何を追加する必要がありますか? また、ライブ変更を受け入れるには、ページが読み込まれますか?

4

3 に答える 3

0

display : visible、変更なし

$("select[name='state']").css('display', 'visible');

に

$("select[name='state']").show()

またはdisplay: block他の有効な表示プロパティのいずれかを使用するselectと、名前で常に無効になっていることに気付きますstateか?

于 2013-06-07T14:01:19.340 に答える
0

どうぞ... http://jsfiddle.net/yeyene/zNZKa/

HTML

<ul>
 <li>
     <label>Country</label>
     <select id="country">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
 </li>
 <li id="billing_info" style="display:none;"><label>State/Province</label><select name="state"><input name="state"></li>
</ul>

CSS

li {list-style:none;display:inline;}

Jクエリ

$(document).ready(function() {
    $('#country').change(function() {
        $('#billing_info').show();
    });
});
于 2013-06-07T14:19:17.787 に答える
0

show()次のように、 とを使用しhide()て、表示される要素を切り替えることができます...

// initially hide both elements
$("#billing_info select[name='state']").hide();
$("#billing_info input[name='state']").hide();

// toggle the visibility of the elements when a country is selected
$("#billing_info select[name='country_code']").change(function () {
    if ($("select[name='country_code']") == "USA") {
        $("select[name='state']").show();
        $("input[name='state']").hide();
    }
    else {
        $("input[name='state']").show();
        $("select[name='state']").hide();
    }
});
于 2013-06-07T14:05:10.143 に答える