0

別のドロップダウンで選択したものに基づいて、ドロップダウン リストのオプションの表示を切り替える方法を知りたいです。

例：オプション付きの大陸という名前のドロップダウンを検討してください：

  asia, europe, america, africa.

国をオプションとして指定した、国という名前の別のドロップダウンを検討してください。私が必要とするのは、ドロップダウンの大陸からアジアを選択した場合、アジアの国のみがドロップダウンの国に表示される必要があるということです。

私はこれを機能させることができません。助けてください。

4

3 に答える 3

0

これを見てください：まったく同じではありませんが、それは始まりです:)

http://jsfiddle.net/Diabl0570/M82JF/4/

于 2012-08-22T09:37:38.780 に答える
0

これは、コメントのリンク（私も+1d）よりも簡単な別の例です

http://jsfiddle.net/joevallender/Y6Rjz/1/

以下のコード

HTML

<label for="continent">Continent</label>
<select id="continent">
    <option value=""> -- Please select -- </option>
    <option value="asia">Asia</option>
    <option value="europe">Europe</option>
</select>

<label for="country">Country</label>
<select id="country"></select>

JS

var data = {
    asia: [
         'china',
         'japan'
    ],
    europe: [
         'france',
         'germany'
    ]
}

$('#continent').change(function(){
    var value = $(this).val();
    var list = data[value];
    $('#country').empty();
    $('#country').append(new Option(' -- Please select -- ',''));
    for(var i = 0; i < list.length; i++) {
       $('#country').append(new Option(capitaliseFirstLetter(list[i]),list[i]))   
    }
})

// Helper from http://stackoverflow.com/questions/1026069/capitalize-the-first-letter-of-string-in-javascript
function capitaliseFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}
于 2012-08-22T09:48:07.873 に答える
0

より一般的な非 jquery ソリューションに興味がある場合は、このフィドルを参照してください

于 2012-08-22T12:25:34.970 に答える