如何將<option>項目的具體數量從一個<select>複製到另一個？

Question

所以我有三個下拉列表（選擇）每行，包含從1到20的數字。第一個選擇定義行中其他兩個選擇項的數量。即從數字1-20 ...如果用戶在第一次選擇中選擇4，另外兩個選擇應該只有4個項目。見附加屏幕。

問題： 達到這個目標的最佳方法是什麼？而且，由於這將在很多地方複製，而且變化很小，所以通用解決方案是我的最終目標......我將通過主要選擇標識（使用onchange屬性），其餘兄弟將得到更新。

VanillaJS/jQuery ...並不重要。

謝謝。

小提琴：http://jsfiddle.net/asadmalik/7aNRZ/721/

function updateDependent(elem){ 
 
console.log("id: " +elem.id); 
 
console.log("value: " +elem.value); 
 

 
console.log('siblings length: ' + $(this).siblings.length); 
 

 
var mySelect = $('#protect'); 
 
$.each(myOptions, function(val, text) { 
 
    mySelect.append(
 
     $('<option></option>').val(val).html(text) 
 
    ); 
 
}); 
 

 
}

<select id="clean" onchange="updateDependent(this)"> 
 
<option value="1">1</option> 
 
<option value="2">2</option> 
 
<option value="3">3</option> 
 
<option value="4">4</option> 
 
<option value="5">5</option> 
 
<option value="6">6</option> 
 
<option value="7">7</option> 
 
<option value="8">8</option> 
 

 
</select> 
 

 
<select id="protect"> 
 
</select> 
 
<select id="deodorize"> 
 
</select>

Answer 1

您可以根據第一選擇所選擇的值複製你的選擇。

$('#clean').on('change', function (e) { 
 
    $('#protect').empty().append($(this).clone().find('option:lt(' + this.value + ')')).val('1'); 
 
    $('#deodorize').empty().append($('#protect').clone().find('option')).val('1'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<select id="clean"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
    <option value="6">6</option> 
 
    <option value="7">7</option> 
 
    <option value="8">8</option> 
 

 
</select> 
 

 
<select id="protect"> 
 
</select> 
 
<select id="deodorize"> 
 
</select>