Wählen Sie, dass eine andere Art von Nummer generieren

Question

Ich habe dieses HTML-Markup.

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

Ich möchte eine Eingabe Typ Nummer nach Auswahl einer Option, ohne die Seite neu zu laden.

So:

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

* I nur die Eingabe von der gewählten Option erzeugt vorlegen müssen.

Vielen Dank im Voraus!

Answer 1

Speichern von Daten in Objektstruktur, und wenn Optionen eingestellten Sollwert, min, max entsprechend gewählte Option Attribut:

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