選擇第一個選項時自動更改第二個下拉列表

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>