2010-12-27 2 views
0

Я это выбор:JQuery: Создание п выбирает после его выбора в окне выбора

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

Как мне сделать, что после выбирающих 2s, 2 выбирает будет создано:

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

Выбрав 3s, он создаст 3 выбора и так далее. Благодаря

бы оценить jsfiddle пример

ответ

2

В функции изменения вашего первого выбора что-то вроде ...

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); 
    } 
} 

совершенно непроверенные, но что-то вроде этого

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

Отличная идея с методом '.replace'! Делает это намного более ясным. – ncuesta

+0

Пожалуйста, укажите пример jsfiddle, потому что я не могу заставить его работать :) – Tom

+0

Хорошо. Полностью отличается от моего первого сообщения, но 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 будет оценена – Tom

Смежные вопросы