jquery - jqueryでドロップダウンリストの選択を変更

Question

私は2つのドロップダウンリストを持っており、ドロップダウン1の選択によってドロップダウン2の値を変更したい.例えば、ドロップダウン1からサブジェクトを選択する. dropdown2 show のアルゴリズム、オペレーティング システム、データ構造。カテゴリの選択を dropdown1 から mathematics に変更すると、 algebra 、 integration .etc が表示されます jquery のみを使用し、選択時にサーバートリップを使用したくありません。クライアント側ですべての処理。

Answer 1

いくつかの例：

http://www.9lessons.info/2010/08/dynamic-dependent-select-box-using.html (たぶん最高です。ここから始めてください)

http://r-ednalan.blogspot.com/2011/03/dynamic-select-box-using-jquery-ajax.html

http://blog.chapagain.com.np/using-jquery-ajax-populate-selection-list/

http://codeassembly.com/Simple-chained-combobox-plugin-for-jQuery/

彼らは例を挙げて説明しました。

Answer 2

このプラグインはうまくいくと思いますjCombo お役に立て
ば幸いです

Answer 3

連想配列といくつかの小さな jQuery を使用することで簡単にこれを行うことができます 。

<select id="subject" name="subject">
  <option id='computerScience' value="1" selected>Computer science</option>
  <option id='mathematics' value="2">Mathematics</option>
</select>
<select name="chapters" id="chapters">
  <option value="1" selected>Algorithms</option>
  <option value="2">operating system</option>
  <option value="3">Data structures</option>
</select>

jQuery コード:

var subjects = {
    'computerScience':['Algorithms','operating system', 'Data structures'], 
    'mathematics':['algebra' , 'integration']
};

$('#subject').change(function(){
  var selectedSubject = $('#subject :selected').attr('id');
  $("#chapters option").remove();
  chapters = subjects[selectedSubject];
  for (i=0;i<chapters.length;i++)
  $('<option/>').val(chapters[i]).html(chapters[i]).appendTo('#chapters');
});

正しい件名を選択するには、件名ドロップダウン オプションの ID が件名配列のキー値と一致する必要があることに注意してください。