Question

如何添加相同数量的具有不同ID的选择框，由另一个选择框值选择？

如果选择选项3，则应创建3个新选择框。如果选择选项2，则应创建2个新选择框。 ... 我希望你明白。

是的，有人能帮帮我吗？非常感谢你！

<select name="children" id="children">
<option>1</option>
<option>2</option>
<option>3</option>
...
</select>
<div id="add_select">
...and below should be new created with jquery...

<select name="children" id="child-1-age">
<option>1</option>
<option>2</option>
<option>3</option>
...
</select>

<select name="children" id="child-2-age">
<option>1</option>
<option>2</option>
<option>3</option>
...
</select>
</div>

Answer 1

使用clone()

只是为了让你开始

$('#children').change(function(){
     var $this=$(this);
     var cloneItem=$(this).val();
     for(var i=1;i<=cloneItem;i++){ 
         var clonedItem=$this.clone().find('select').attr('id','child'+i+'-age').end();
         $('#add_select').html(clonedItem);

     }
});

或

$('#children').change(function(){
 var $this=$(this);
 var cloneItem=$(this).val();
 for(var i=1;i<=cloneItem;i++){ 
     var clonedItem=$this.clone();
     clonedItem.attr('id','child'+i+'-age');
     $('#add_select').html(clonedItem);

 }
});

Answer 2

还可以尝试以下代码：

$('#children').change(function() {
    var selected = $(this).val();
    for (var i = 0; i < selected; i++) {
        var idd = "add_select-" + selected+ "-age";
        $('#children').clone().attr('id', idd).appendTo('body');
    }
});

选中JSFiddle。

Answer 3

使用克隆，您可以创建模板并将其复制x次。我记录了我的代码，希望它足以理解：

$('#children').change(function(){
    var $div = $('#add_select'), //Select the appending div
        $select = $('<select/>', {name : 'children'}), //Create a template
        index = this.selectedIndex; //get the number of select

    $div.empty(); //Erase old select

    if(!index) return; //Stop the code if the number of child is 0

    for(var i=0; i<14; i++){ //Maximum child age
        var $option = $('<option/>', {text : i, value : i});//Create the option element
        $select.append($option);//Append to the template
    }

    for(var u=0; u<index; u++){//Get the number of child
        var $clone = $select.clone(); //Clone the template
        $clone.attr('id', 'child-'+(u+1)+'-age').appendTo($div); //Change its id and append to the container
    }
}).trigger('change');

这里是工作小提琴：http://jsfiddle.net/NCLae/1/

使用另一个选择框的值创建其他选择框

3 个答案: