2010-12-27 9 views
0

Ich habe diese wählen:JQuery: n Erstellen wählt, nachdem er in der Auswahlbox wählen

<select name="main"> 
<option value="2">2s</option> 
<option value="3">3s</option> 
<option value="5">5s</option> 
</select> 

Wie kann ich sicherstellen, dass 2s nach Wahl, 2 wählt erstellt werden würde:

<select name="select1"> 
<option value="0">0</option> 
<option value="1">1</option> 
<option value="2">2</option> 
</select> 
<select name="select2"> 
<option value="0">0</option> 
<option value="1">1</option> 
<option value="2">2</option> 
</select> 

Nach der Auswahl von 3s würden 3 Auswahlmöglichkeiten und so weiter erstellt. Dank

Würde jsfiddle Beispiel

Antwort

2

In der Änderungsfunktion des ersten Auswahl so etwas wie ...

function selChanged(){ 
    var number=$('option:selected',$(this)).val(); 

    for (var i=0; i<number; i++){ 
     var newSel = $('<select name="newSelect'+i+'">'); 
     for (var iOpt=0; iOpt<3; iOpt++){ 
      var opt = $('<option value="*">*</option>'.replace('*',iOpt)); 
      newSel.add(opt); 
     } 
     $(this).insertAfter(newSel); 
    } 
} 

völlig ungetestet schätzen aber etwas wie das

UPDATE

$('select[name=main]').change(function(){selChanged(this);}); 

function selChanged(con){ 
    var number=$('option:selected',$(con)).val(); 

    //remove existing 
    $("[name^='newSelect']").remove(); 

    for (var i=0; i<number; i++){ 
     var newSel = $('<select name="newSelect'+i+'">'); 
     for (var iOpt=0; iOpt<3; iOpt++){ 
      var opt = $('<option value="*">*</option>'.replace(/\*/g,iOpt)); 
      newSel[0].options.add(opt[0]); 
     } 
     newSel.insertAfter($(con)); 
    } 
} 
+0

Tolle Idee mit der '.replace' Methode! Macht es viel klarer .. – ncuesta

+0

Bitte geben Sie jsfiddle Beispiel, weil ich es nicht funktionieren kann :) – Tom

+0

Ok. Völlig anders als mein erster Beitrag, aber http://jsfiddle.net/f9GQr/ –

1
$("select[name=main]").change(function() { 
    var elemCount = $(this).val(); 
    for(var i=0; i<elemCount; i++) { 
     var HTML = "<select name='select+i' />"; 
     $(HTML).append("<option value='0'>0s</option>"); 
     $(HTML).append("<option value='1'>1s</option>"); 
     $(HTML).append("<option value='2'>2s</option>"); 
     $("div.container").append(HTML); 
    } 
}); 

<div class="container"></div> 
+0

Jsfiddle Beispiel würde geschätzt werden – Tom