玩选择和JavaScript

Question

我的代码是:

<select name='main'>
   <option>Animals</option>
   <option>Food</option>
   <option>Cars</option>
</select>

<select name='other'>
   <option>Rats</option>
   <option>Cats</option>
   <option>Oranges</option>
   <option>Audi</option>
</select>

如何过滤我的第二个<select>,所以它只显示我想要的项目,例如.如果我选择动物,我的选择将是:

<select name='other'>
   <option>Rats</option>
   <option>Cats</option>
</select>

如果我选择"食物",我<select>会看起来像:

<select name='other'>
   <option>Oranges</option>
</select>

好吧,我希望你明白这个主意.谢谢.

Answer 1

您需要在选择之间创建某种关联,我建议使用该data-*属性:

<select id="main_select" name='main'>
  <option>Animals</option>
  <option>Food</option>
  <option>Cars</option>
</select>

<select id="other_select" name='other'>
  <option data-category="Animals">Rats</option>
  <option data-category="Animals">Cats</option>
  <option data-category="Food">Oranges</option>
  <option data-category="Cars">Audi</option>
</select>

一旦所有<option>元素都适用,JavaScript代码将如下所示:

编辑,这工作:

$(function() {
   var cloned = $('#other_select option').clone();
   $('#main_select').change(function() {
      var selectedCategory = $(':selected', this).text();
      var filtered = $(cloned).filter("[data-category='" + selectedCategory + "']");
      $("#other_select option").replaceWith(filtered);
   });
   $('#main_select').change(); //fire the event initially.
});

jsFiddle例子