Question

这是我的HTML代码，我希望当我点击Add More按钮然后添加div并选择具有不同名称的框，例如name=data[Productpricemaster][30][attributeunitids]和name=data[Productpricemaster][31][attributeunitids]

＆＃13;

<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()
			{
			 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>');	
	
	unitcount++;
	            var value = $('.target').val();
				$('.list').val(value);
				$('.removes1').click(function()
					{
						$(this).parent().remove();
					});
			});
</script>

＆＃13;

Answer 1

此行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]\"")

您可以替换为您想要的任何字符串。

<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()
			{
			 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>');	
	
	unitcount++;
	            var value = $('.target').val();
				$('.list').val(value);
				$('.removes1').click(function()
					{
						$(this).parent().remove();
					});
			});
</script>

Answer 2

我添加了两行，它将动态引入ID和name属性进行选择。

 $($('#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]');

Fnal Code snipped是

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

jquery附加具有不同名称

2 个答案: