选择第一个选项时自动更改第二个下拉菜单

Question

我有两个下拉菜单，选择第一个应该会自动更改第二个。两个下拉菜单始终可见。

我创建了一个 fiddle 来帮助您入门。你能帮我吗。谢谢！

HTML Fiddle

<select name="" id="">
     <option value="">-</option>
     <option value="">Apple</option>
     <option value="">Orange</option>
     <option value="">Cucumber</option> <!-- veg -->
     <option value="">Banana</option>
     <option value="">Grapes</option>
     <option value="">Onion</option>    <!-- veg -->
     <option value="">Tomato</option>   <!-- veg -->
</select>

<select name="" id="">
    <option value="">-</option>
    <option value="">Fruit</option>
    <option value="">Vegetable</option>
</select>

Answer 1

使用data-*属性区分fruit和vegetable

var category = document.getElementById('category');
document.getElementById('elements').onchange = function() {
  var optionSelected = this.options[this.selectedIndex];
  if (optionSelected.textContent != '-') {
    if (optionSelected.dataset.val === 'veg') {
      category.value = 'veg';
    } else {
      category.value = 'fruit';
    }
  } else {
    category.value = '';
  }
}

<select name="" id="elements">
  <option value="">-</option>
  <option value="">Apple</option>
  <option value="">Orange</option>
  <option data-val='veg' value="">Cucumber</option>
  <!-- veg -->
  <option value="">Banana</option>
  <option value="">Grapes</option>
  <option data-val='veg' value="">Onion</option>
  <!-- veg -->
  <option data-val='veg' value="">Tomato</option>
  <!-- veg -->
</select>

<select name="" id="category">
  <option value="">-</option>
  <option value="fruit">Fruit</option>
  <option value="veg">Vegetable</option>
</select>

Answer 2

如果您使用 jQuery 则更简单。

这是您的 jQuery 代码。

$('#item').on('change',function(){


$('#category').val($(this) .find("option:selected").attr('data-category'));
});

这是修改后的HTML

<select name="" id="item">
<option value="">-</option>
<option data-category ="fruit" value="">Apple</option>
<option data-category ="fruit" value="">Orange</option>
<option data-category ="vegetable">Cucumber</option>
<option data-category ="fruit" value="">Banana</option>
<option data-category ="fruit" value="">Grapes</option>
<option data-category ="vegetable">Onion</option>
</select>

<select name="" id="category">
   <option value="">-</option>
   <option value="fruit">Fruit</option>
   <option value="vegetable">Vegetables</option>
</select>

选择第一个选项时自动更改第二个下拉菜单

Auto change second dropdown when selecting the first option

html

javascript

html-select

dropdown