Question

我有两个下拉列表，想要通过选择dropdown1来更改dropdown2的值例如从下拉列表中选择主题1计算机科学。 dropdown2 show的算法，操作系统，数据结构。并且通过将类别选择从dropdown1更改为数学，它将显示代数，集成.etc我想仅使用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来做到这一点，所以试试这个......演示here 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必须与主题数组的键值匹配才能选择正确的主题。

更改jquery中下拉列表的选择

3 个答案: