選擇生成不同的輸入類型編號

Question

我有這個html標記。

<select name="components"> 
    <option value="solo">solo</option> 
    <option value="group">group</option> 
    <option value="band">band</option> 
</select> 

我想在選擇一個選項而不重新加載頁面後生成輸入類型編號。

像這樣：

// When I select solo option: 
<input type="number" name="dancers" value="1" min="1" max="1"> 

// When I select group option: 
<input type="number" name="dancers" value="2" min="2" max="6"> 

// When I select band option: 
<input type="number" name="dancers" value="7" min="7" max="12"> 

*我需要提交僅由所選擇的選項所產生的輸入。

預先感謝您！在對象結構

Answer 1

存儲數據，而當選擇的選項設定值，最小值，最大值，根據選擇的選項的屬性：

使用Javascript：

data = {"solo": {"value": 1, "min": 1, "max": 1}, 
     "group": {"value": 2, "min": 2, "max": 6}, 
     "band": {"value": 7, "min": 7, "max": 12}}; 

$("select[name='components']").change(function(){ 
    selected_option = $(this).val(); 
    selected_data = data[selected_option]; 
    ["value", "min", "max"].forEach(function(key){ 
     $("input[name='dancers']").attr(key, selected_data[key]); 
    }); 
}); 

HTML：

<select name="components"> 
    <option value="solo">solo</option> 
    <option value="group">group</option> 
    <option value="band">band</option> 
</select> 

<input type="number" name="dancers"> 

jsfilddle