他のドロップダウンリストの選択に基づいて1つのドロップダウンリストを作成する

Question

2つのドロップダウンリスト、カテゴリおよびアイテムを作成したいとします。

車のカテゴリを1つ選択すると、アイテムのドロップダウンリストにHonda、Volvo、Nissanが表示されます。

phoneというカテゴリのいずれかを選択すると、アイテムのドロップダウンリストにこのiPhone、Samsung、Nokiaが必要です。

どうすればいいですか？ 私はプレーンなHTMLではできないことを知っています。

Answer 1

WORKING DEMO http://jsfiddle.net/kasperfish/r7MN9/3/

cars=new Array("Mercedes","Volvo","BMW","porche"); 
phones=new Array('Samsung','Nokia','Iphone'); 

populateSelect(); 

$(function() { 

     $('#cat').change(function(){ 
     populateSelect(); 
    }); 

}); 


function populateSelect(){ 
    cat=$('#cat').val(); 
    $('#item').html(''); 


    if(cat=='car'){ 
     cars.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='phone'){ 
     phones.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

} 

を更新しました：あなたが好きなだけの配列を追加することができるようするためにeval（）を使用しました。 JSFIDDLE DEMO

cars=new Array("Mercedes","Volvo","BMW","porche"); 
phones=new Array('Samsung','Nokia','Iphone'); 
names=new Array('Kasper','Elke','Fred','Bobby','Frits'); 
colors=new Array('blue','green','yellow'); 

populateSelect(); 

$(function() { 

     $('#cat').change(function(){ 
     populateSelect(); 
    }); 

}); 


function populateSelect(){ 
    cat=$('#cat').val(); 
    $('#item').html(''); 

     eval(cat).forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

Answer 2

最終目標が何であるかによって、これを達成できる方法はたくさんあります。ここには2つの最も一般的なものがあります。

これは基本的なプロセスです：オプションで埋め初期ドロップダウンで

1. ページが読み込まれると、のカテゴリ（自動車、トラック、SUV）および無効項目のドロップダウンをしましょう。

AJAX（最も少ないページのロードで最もシームレス）：

1. Javascriptがお送り使用
2. ユーザーは、最初のドロップダウンから値を選択し、これを処理するいくつかの方法がありますポストまたはリクエストパラメータとしてカテゴリドロップダウンから選択されたオプションの値を含むPHPスクリプト（または他のハンドラ）へのajaxリクエスト。
3. カテゴリに基づいてアイテムのドロップダウンの値を取得します。これらは、データベース、変数、静的ファイル、またはその他の手段から得られます。
4. 応答として値を返します
5. Javascriptを使って（またはjQueryのようなライブラリを使うこともできます）、AJAXリクエストから返されたオプションをAJAXのリクエストに挿入します（または、json、xml、plaintextなど）。アイテムドロップダウンを有効にして、ユーザーが選択できるようにします。
6. ここからは、AJAXリクエストとレスポンスを使用し続けるか、フォームにPOSTを返すか、特定の用途で必要とされるものをPOSTします。

AJAXを使用したくない場合は、フォームを非常に簡単にサーバー側ハンドラにPOSTし、カテゴリドロップダウンから値を取得し、アイテムドロップダウンの値を見つけてカテゴリのドロップダウンの値を設定して無効にするHTMLレスポンスをレンダリングして（カテゴリを変更する場合は、戻るボタンを使用する必要があります）、アイテムのドロップダウンに値を設定します。 （jQueryを使って）