选择第一个选项时自动更改第二个下拉列表

Question

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

我已经创建了一个小提琴让你开始。你能帮我吗。谢谢！

HTMLFiddle

<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>