jquery - 更改 jquery 中下拉列表的选择

Question

我有两个下拉列表，并希望通过选择 dropdown1 来更改 dropdown2 的值，例如 Select Subject from dropdown1 Computer science 。dropdown2 显示算法、操作系统、数据结构。并通过将类别选择从 dropdown1 更改为数学，它将显示代数、集成等。我只想使用 jquery 并且没有服务器在选择时跳闸。客户端的所有处理。

Answer 1

我认为这个插件可以解决问题 jCombo
希望对您有所帮助

Answer 2

一些例子：

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 3

您可以通过使用关联数组和一些小 jQuery 来简单地做到这一点，所以试试这个......这里的演示 HTML 代码：

<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 必须与主题数组的键值匹配，才能选择正确的主题。