最初のオプションを選択すると自動的に2番目のドロップダウンが変更されます

Question

2つのドロップダウンがあります。最初のドロップダウンを選択すると2番目のドロップダウンが自動的に変更されます。両方のドロップダウンが常に表示されます。

私はあなたを始めるためにフィドルを作成しました。あなたは私を助けることができます。ありがとう！

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

使用あなたはjQueryのを使用している場合、それは簡単です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

区別するdata-*属性。

これは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>