動的選択ボックス

CSS/HTML/Javascriptのみを使用することをお勧めします。動的選択ボックス

私がこれを設定したいのは、ドロップダウンボックスのグループを生成することです。これは、ドロップダウンした項目がマスターリストから選択する項目によって異なります。彼らはボルボを選ぶ場合

<html> 
<body> 

<form action=""> 
<select name="cars"> 
<option value="volvo">Volvo</option> 
<option value="saab">Saab</option> 
<option value="fiat">Fiat</option> 
<option value="audi">Audi</option> 
</select> 
</form> 

</body> 
</html>

例えば

は今、私はあなたがボルボ特定の機能やFiatsのための別個のセットを有効または無効にすることができます（二つのオプション付き）ドロップダウンのセットをしたいです。どうすればこのことができますか？

出典

2011-08-15 justinsz

が重複する可能性を使用して、このような何かを行うことができhttp://stackoverflow.com/questions/974046/show-additional-content-based - 非選択） –

サーバー側のリソースを使用したくないという場合は、大きなリストのデータを作成してクライアント上に保持することだけです。たとえば、

var masterList = [ 
    { 'Volvo': 'volvo', 
     'Elements': [ 
     { 'SomePieceOfData', 'SomeValue' }, 
     { 'SomePieceOfData2', 'SomeValue2' }, 
     { 'SomePieceOfData3', 'SomeValue3' }, 
    ]}, 
    { 'Fiat': 'fiat', 
     'Elements': [ 
     { 'SomePieceOfData4', 'SomeValue4' }, 
     { 'SomePieceOfData5', 'SomeValue5' }, 
     { 'SomePieceOfData6', 'SomeValue5' }, 
    ]}, 
];

このように、オブジェクトを参照して詳細を照会することで、ドロップダウンに表示することができます。

出典

2011-08-15 18:30:32 Tejs

ます。また、（[選択に基づく表示追加コンテンツ]のjQuery

<html> 
<head> 
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script> 
</head> 
<body> 

<form action=""> 
<select id="cars" name="cars"> 
<option value="volvo">Volvo</option> 
<option value="saab">Saab</option> 
<option value="fiat">Fiat</option> 
<option value="audi">Audi</option> 
</select> 

<div id="model"> 
</select> 
</form> 

<script type="text/javascript"> 
    function makeOptions(arr) 
    { 
     var options = '<select id="car-model" name="car-model">'; 

     for (x = 0; x < arr.length; x++) 
     { 
      options += '<option value="'+arr[x]+'">'+arr[x]+'</option>'; 
     } 

     options += '</select>'; 

     return options; 
    } 

    $(function() { 
     $('#cars').change(function() { 
      var volvo = ['this', 'that', 'another'], 
       saab = ['this', 'that', 'another'], 
       fiat = ['this', 'that', 'another'], 
       audi = ['this', 'that', 'another']; 

      switch ($(this).val()) 
      { 
       case 'Volvo': 
        newSelect = makeOptions(volvo); 
        break; 
       case 'Saab': 
        newSelect = makeOptions(saab); 
        break; 
       case 'Fiat': 
        newSelect = makeOptions(fiat); 
        break; 
       case 'Audi': 
        newSelect = makeOptions(audi); 
        break; 
      } 

      $('#model').html(newSelect); 
     }); 
    }); 
</script> 
</body> 
</html>

出典

2011-08-15 20:31:02 k4t434sis

答えて

関連する問題