2013-12-23 35 views
0

我有1选择框,其中有数字作为选项。我有一个div内的3个输入文本框。克隆divs与下拉菜单选项jquery

当用户在选择框中选择一个数字,我想重复该div取决于选择框的数量...

重要部分是,该ID和每个文本的名称盒有递增,所以这样的事情:

text_box_first_1, text_box_second_2, text_box_thrid_3 
text_box_first_2, text_box_second_2, text_box_thrid_2 

编辑: 对不起,忘了寄我的了:

 <script> 
    function clone(){ 
     var $newdiv = $('.initial_clone_div:first').clone(); 
     $('#add_clones_here').append($newdiv); 
    } 

    $('#num_periods').change(function() { 
     for(var counter = 0; counter < $(this).val()-1; counter++) { 
      $('.period_title').html('Period ' +(counter+1)); 
      clone(); 
     } 
    }); 


</script> 

<!-- Period scores --> 
    <div class="form-group initial_clone_div"> 
     <h3 class="period_title" id="period_title_1">Period 1</h3> 
     <div class="col-md-4"> 
      <label class="control-label" for="num_periods">{{{ Lang::get('admin/teams/terms.blue_team') }}}</label> 
      <input class="form-control" type="text" name="blue_team_period_1" id="blue_team_period_1" />  
     </div> 
     <div class="col-md-4"> 
      <label class="control-label" for="num_periods">{{{ Lang::get('admin/teams/terms.grey_team') }}}</label> 
      <input class="form-control" type="text" name="grey_team_period_1" id="grey_team_period_1" />  
     </div> 
     <div class="col-md-4"> 
      <label class="control-label" for="num_periods">{{{ Lang::get('admin/teams/terms.black_team') }}}</label> 
      <input class="form-control" type="text" name="black_team_period_1" id="black_team_period_1" /> 
     </div> 
    </div> 
    <!-- ./ Period scores --> 

    <div id="add_clones_here"> 

    </div> 

我不知道如何修改文本框的ID和名称。 我也得到了展示权期号(H3标签)

编辑一个问题:解决方法:

function clearClones(){ 
     $('.initial_clone_div').each(function (i) { 
      $(this).remove(); 
     }); 
    } 

    $('#num_periods').change(function() { 
     $div = $('.initial_clone_div:first'); 
     clearClones(); 
     for (var j = 1; j <= $('#num_periods').val(); j++) { 
      $div.clone() 
       .appendTo('#outer_div') 
       .find('input') 
       .each(function (k, v) { 
        if(k+1 == 1) 
         var team = "blue"; 
        else if(k+1 == 2) 
         var team = "grey"; 
        else if(k+1 == 3) 
         var team = "black"; 

       var theId = team+ 'team_period_' + (j); 
       $(v).attr('id', theId); 
       $(v).attr('placeholder', theId); 
      }); 
     } 
    }); 
+2

你尝试过这么远吗? SO并不是一个可以请求代码写给你的地方,而是用来解决你自己编写的代码。如果你还没有做任何尝试,我建议你尝试找到另一种资源来让你开始,然后一旦你遇到了障碍,然后回到这里。 –

+1

O口抱歉,我打算发布我的代码,但忘记了 - .-我编辑它。 –

回答

1

我创建了一个小提琴(LINK),应该是很容易按照有关如何做到这一点。

HTML

<select id="select"></select> 
<div id="outerDiv"> 
    <div id="theDiv"> 
     <input type="text" /> 
     <input type="text" /> 
     <input type="text" /> 
    </div> 
</div> 

JS

// Create dropdown 
for (var i = 0; i < 11; i++) { 
    $('#select').append('<option value="' + i + '">Clone ' + i + ' Times</option>'); 
} 

// Do main procedure 
var inc=1; 

$('#select').change(function() { 
    inc++ 
    for (var j = 0; j <= $('#select').val(); j++) { 
     $('#theDiv').clone() 
      .appendTo('#outerDiv') 
      .find('input') 
      .each(function (k, v) { 
      var theId = 'input_' +inc+ '_' + (j + 1) + '_' + (k + 1); 
      $(v).attr('id', theId); 
      $(v).attr('placeholder', theId); 
     }); 
    } 
}); 
+0

有没有办法删除克隆,以便当用户选择2时,只有2个克隆。如果他们选择3,那么只有3 ...现在它不会擦除我相信的其他克隆... –

+0

Nvm,我找到了一种方法。我在我的问题中添加了解决方案。谢谢! –

0

1)获取将被克隆的元素的id。既然你想仅增加数,你必须根据该_

var sp = $('.initial_clone_div:first').prop('id').split('_'); 

2分割)sp数组的最后一个索引转换为数字,并增加它。然后再次转换回string dataType。

sp[3] = (+sp[3]+1).toString(); 

3)现在加入并将newId设置为克隆元素。

4).clone([withDataAndEvents ] [, deepWithDataAndEvents ])

var newId = sp.join('_'); 
var $newdiv = $('.initial_clone_div:first').clone(true, true).prop('id', newId); 
+1

谢谢,我会尝试一下,让你知道它是如何工作的! –

+0

@AraSivaneswaran当然需要你自己的时间来学习它。如果您遇到任何问题,请告诉我,如果我有空,我会尽快通知您。 – Praveen

+0

好吧,我试过了,但它一直试图改变div的id。但我希望它改变div内文本框的ID ... –