jQuery的追加mullti選擇框用不同的名字

Question

這是我的HTML代碼，我想，當我點擊Add More按鈕，然後追加div和選擇框用不同的名稱，如name=data[Productpricemaster][30][attributeunitids]和name=data[Productpricemaster][31][attributeunitids]

<div class="topdivdata"> 
 
    <div style="width:100px; float:left;border:1px solid"> 
 
    <select id="2" name="data[Productpricemaster][1][attributeunitids]" class="col-xs-10 col-sm-10 selectedvalue"> 
 
     <option value="0">None</option> 
 
     <option value="4">KG</option> 
 
     <option value="5">MG </option> 
 
     <option value="6">GM </option> 
 
    </select> 
 
    </div> 
 
    <div style="width:100px; float:left;border:1px solid"> 
 
    <select id="3" name="data[Productpricemaster][11][attributeunitids]" class="col-xs-10 col-sm-10 selectedvalue" > 
 
     <option value="0">None</option> 
 
     <option value="7">Red </option> 
 
     <option value="8">Green </option> 
 
     <option value="9">Blue </option> 
 
     <option value="10">Yellow </option> 
 
    </select> 
 
    </div> 
 
    <div style="clear:both; "></div> 
 
</div> 
 
<div id="addnewunit"style="width:100px; float:left;border:1px solid"> <span class="btn btn-xs cic"> <i class="icon-plus"> </i>+ Add More </span> </div> 
 
<div id="addmoreunit" style="margin-top:30px"> </div> 
 
<script src="http://code.jquery.com/jquery-1.12.2.js" type="text/jscript"></script> 
 
<script> 
 
unitcount=1; 
 
$('#addnewunit').click(function() 
 
\t \t \t { 
 
\t \t \t var topdiv = $('.topdivdata').html(); \t 
 
$('#addmoreunit').append('<div>.'+topdiv+'.<div class="removes1"><span class="btn btn-xs"><i class="icon-plus"></i>- Remove</span></div></div>'); \t 
 
\t 
 
\t unitcount++; 
 
\t    var value = $('.target').val(); 
 
\t \t \t \t $('.list').val(value); 
 
\t \t \t \t $('.removes1').click(function() 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t $(this).parent().remove(); 
 
\t \t \t \t \t }); 
 
\t \t \t }); 
 
</script>

Answer 1

我已經加入吹塑兩個線路，將動態介紹ID和名稱屬性進行選擇。

$($('#addmoreunit').children().last().find('select')[0]).attr('id', (unitcount + 1)).attr('name', 'data[Productpricemaster][' + (unitcount + 1) + '][attributeunitids]'); 
$($('#addmoreunit').children().last().find('select')[1]).attr('id', (unitcount + 2)).attr('name', 'data[Productpricemaster][' + (unitcount + 2) + '][attributeunitids]'); 

剪斷最後的代碼是

<div class="topdivdata"> 
    <div style="width: 100px; float: left; border: 1px solid"> 
     <select id="1" name="data[Productpricemaster][1][attributeunitids]" class="col-xs-10 col-sm-10 selectedvalue"> 
      <option value="0">None</option> 
      <option value="4">KG</option> 
      <option value="5">MG </option> 
      <option value="6">GM </option> 
     </select> 
    </div> 
    <div style="width: 100px; float: left; border: 1px solid"> 
     <select id="2" name="data[Productpricemaster][2][attributeunitids]" class="col-xs-10 col-sm-10 selectedvalue"> 
      <option value="0">None</option> 
      <option value="7">Red </option> 
      <option value="8">Green </option> 
      <option value="9">Blue </option> 
      <option value="10">Yellow </option> 
     </select> 
    </div> 
    <div style="clear: both;"> 
    </div> 
</div> 
<div id="addnewunit" style="width: 100px; float: left; border: 1px solid"> 
    <span class="btn btn-xs cic"><i class="icon-plus"></i>+ Add More </span> 
</div> 
<div id="addmoreunit" style="margin-top: 30px"> 
</div> 
<script> 
    unitcount = 2; 
    $('#addnewunit').click(function() { 
     var topdiv = $('.topdivdata').html(); 
     $('#addmoreunit').append('<div>.' + topdiv + '.<div class="removes1"><span class="btn btn-xs"><i class="icon-plus"></i>- Remove</span></div></div>'); 
     $($('#addmoreunit').children().last().find('select')[0]).attr('id', (unitcount + 1)).attr('name', 'data[Productpricemaster][' + (unitcount + 1) + '][attributeunitids]'); 
     $($('#addmoreunit').children().last().find('select')[1]).attr('id', (unitcount + 2)).attr('name', 'data[Productpricemaster][' + (unitcount + 2) + '][attributeunitids]'); 
     unitcount = unitcount + 2; 
     var value = $('.target').val(); 
     $('.list').val(value); 
     $('.removes1').click(function() { 
      $(this).parent().remove(); 
     }); 
    }); 
</script> 

Answer 2

在此行後var topdiv = $('.topdivdata').html(); add this：

topdiv = topdiv.replace("name=\"data[Productpricemaster][1][attributeunitids]\"", "name=\"data[Productpricemaster][30][attributeunitids]\"") 
topdiv = topdiv.replace("name=\"data[Productpricemaster][11][attributeunitids]\"", "name=\"data[Productpricemaster][31][attributeunitids]\"") 

你可以用你想要的任何字符串進行替換。

<div class="topdivdata"> 
 
    <div style="width:100px; float:left;border:1px solid"> 
 
    <select id="2" name="data[Productpricemaster][1][attributeunitids]" class="col-xs-10 col-sm-10 selectedvalue"> 
 
     <option value="0">None</option> 
 
     <option value="4">KG</option> 
 
     <option value="5">MG </option> 
 
     <option value="6">GM </option> 
 
    </select> 
 
    </div> 
 
    <div style="width:100px; float:left;border:1px solid"> 
 
    <select id="3" name="data[Productpricemaster][11][attributeunitids]" class="col-xs-10 col-sm-10 selectedvalue" > 
 
     <option value="0">None</option> 
 
     <option value="7">Red </option> 
 
     <option value="8">Green </option> 
 
     <option value="9">Blue </option> 
 
     <option value="10">Yellow </option> 
 
    </select> 
 
    </div> 
 
    <div style="clear:both; "></div> 
 
</div> 
 
<div id="addnewunit"style="width:100px; float:left;border:1px solid"> <span class="btn btn-xs cic"> <i class="icon-plus"> </i>+ Add More </span> </div> 
 
<div id="addmoreunit" style="margin-top:30px"> </div> 
 
<script src="http://code.jquery.com/jquery-1.12.2.js" type="text/jscript"></script> 
 
<script> 
 
unitcount=1; 
 
$('#addnewunit').click(function() 
 
\t \t \t { 
 
\t \t \t var topdiv = $('.topdivdata').html(); 
 
topdiv = topdiv.replace("name=\"data[Productpricemaster][1][attributeunitids]\"", "name=\"data[Productpricemaster][30][attributeunitids]\"") 
 
topdiv = topdiv.replace("name=\"data[Productpricemaster][11][attributeunitids]\"", "name=\"data[Productpricemaster][31][attributeunitids]\"") 
 

 

 
$('#addmoreunit').append('<div>.'+topdiv+'.<div class="removes1"><span class="btn btn-xs"><i class="icon-plus"></i>- Remove</span></div></div>'); \t 
 
\t 
 
\t unitcount++; 
 
\t    var value = $('.target').val(); 
 
\t \t \t \t $('.list').val(value); 
 
\t \t \t \t $('.removes1').click(function() 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t $(this).parent().remove(); 
 
\t \t \t \t \t }); 
 
\t \t \t }); 
 
</script>