Question

我正在创建一个生成动态字段的表单。

在该动态字段上我有一个选择选项。在该选项中，有两个选项用于给出尺寸一个in / in和其他m / cm
如果我选择合适，则尺寸将以英尺为单位。否则以m / cm为单位，代码工作正常
但问题是，当我创建5次动态字段时，那时候如果我选择了一个只有更改正在进行，那么有5个选项。
在一个字段选项中，我知道原因，因为所有动态ID的id相同，然后我可以为该选择选项创建动态ID。
就在这下面是动态生成字段意味着如果选择五次创建5动态字段我知道它非常广泛来描述我的问题但我需要解决

$(document).ready(function() {
  var count = 0;
  $("#sel").on('change', function() {

    var counter = parseInt(this.value, 10);
    $('#parent').change('<div id="first' + count + '">text</div>');
    var html = '<div class="form-group"><label class="col-sm-9 control-label"><h3><strong>Item Details</strong></h3></label></div>';
    var html1 = '<div class="row"><div class="form-group"> <label for="inputEmail3" class="col-sm-6 control-label">* Dimensions (Best Estimate):</label> <div class="col-sm-3"><select id="mySelect" class="form-control"><option>ft/in/lbs</option><option>m/cm/kg</option></select></div>\
  </div></div><br>';
    var html2 = '<div style="padding-left: 4cm;"><div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Length<?php echo str_repeat(' & nbsp ', 6);?></span><div class="input-group-addon"><input type="text" name="length_m" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="length_md" id="myInput1" value="ft" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><div class="input-group-addon"><input type="text" name="length_cm" id="myInput" placeholder="" maxlength="8" aria-describedby="basic-addon1" size="8" required></div><div class="input-group-addon"><input type="text" name="length_cmd" id="myInput2" value="in" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div>\
      </div>';
    var html3 = '<div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Width<?php echo str_repeat(' & nbsp ', 8);?></span><div class="input-group-addon"><input type="text" name="width_m" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="width_md" id="myInput3" value="ft" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><div class="input-group-addon"><input type="text" name="width_cm" id="myInput" placeholder="" maxlength="8" aria-describedby="basic-addon1" size="8" required></div><div class="input-group-addon"><input type="text" name="width_cmd" id="myInput4" value="in" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div>\
      </div>';
    var html4 = '<div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Height<?php echo str_repeat(' & nbsp ', 7);?></span><div class="input-group-addon"><input type="text" name="height_m" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="height_md" id="myInput5" value="ft" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><div class="input-group-addon"><input type="text" name="height_cm" id="myInput" placeholder="" maxlength="8" aria-describedby="basic-addon1" size="8" required></div><div class="input-group-addon"><input type="text" name="height_cmd" id="myInput6" value="in" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div>\
      </div>';
    var html5 = '<div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Weight<?php echo str_repeat(' & nbsp ', 6);?></span><div class="input-group-addon"><input type="text" name="weight" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="weightd" id="myInput7" value="lbs" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Quantity&nbsp;&nbsp;</span><div class="input-group-addon"><input type="text" name="quantity" id="myInput" placeholder="" maxlength="2" size="2" aria-describedby="basic-addon1" required></div>\
      </div></div></br></br>';
    var html6 = '<div class="form-group"><label for="inputEmail3" class="col-sm-6 control-label">Item description</label><div style="padding-left: 4cm;"><textarea class="form-control" rows="5" id="comment" name="additional_detail" placeholder="Item description"></textarea></div>\
      </div></br></br></br>';
    count++;
    var str1 = "";
    for (var i = 1; i < counter; i++) {
      str1 += [html, html1, html2, html3, html4, html5, html6];
      str1 = str1.replace(/,/gi, "\n").replace(/^,/, "");
    }
    $("#inrlog").empty().append(str1);

  })
});

这里的代码是在该id上选择选项id，它改变该字段两个不同的值，以ft / in为单位，以m / cm为单位

$('#mySelect').on('change', function() {
  var value = $(this).find(':selected').data('value');
  var value1 = $(this).find(':selected').data('value1');
  var value2 = $(this).find(':selected').data('value2');
  $('#myInput1').attr('value', value);
  $('#myInput2').attr('value', value1);
  $('#myInput3').attr('value', value);
  $('#myInput4').attr('value', value1);
  $('#myInput5').attr('value', value);
  $('#myInput6').attr('value', value1);
  $('#myInput7').attr('value', value2);
});

Answer 1

根据您的代码，您需要一个字符串html1的动态选择标记。在当前代码中，您没有html变量的循环。

你可以做的是，使用一个名为html1而不是变量的函数，并在该循环中调用该函数并将counter（i）变量传递给该函数，并将select标记作为动态字符串返回。 / p>

＆＃13;

expiryDate = nil

＆＃13;

在该函数中，select标签的更改如下，它采用动态i值。

$(document).ready(function() {
  var count = 0;
  $("#sel").on('change', function() {

    var counter = parseInt(this.value, 10);
    $('#parent').change('<div id="first' + count + '">text</div>');
    var html = '<div class="form-group"><label class="col-sm-9 control-label"><h3><strong>Item Details</strong></h3></label></div>';
    
    var html2 = '<div style="padding-left: 4cm;"><div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Length<?php echo str_repeat(' & nbsp ', 6);?></span><div class="input-group-addon"><input type="text" name="length_m" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="length_md" id="myInput1" value="ft" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><div class="input-group-addon"><input type="text" name="length_cm" id="myInput" placeholder="" maxlength="8" aria-describedby="basic-addon1" size="8" required></div><div class="input-group-addon"><input type="text" name="length_cmd" id="myInput2" value="in" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div>\
      </div>';
    var html3 = '<div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Width<?php echo str_repeat(' & nbsp ', 8);?></span><div class="input-group-addon"><input type="text" name="width_m" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="width_md" id="myInput3" value="ft" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><div class="input-group-addon"><input type="text" name="width_cm" id="myInput" placeholder="" maxlength="8" aria-describedby="basic-addon1" size="8" required></div><div class="input-group-addon"><input type="text" name="width_cmd" id="myInput4" value="in" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div>\
      </div>';
    var html4 = '<div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Height<?php echo str_repeat(' & nbsp ', 7);?></span><div class="input-group-addon"><input type="text" name="height_m" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="height_md" id="myInput5" value="ft" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><div class="input-group-addon"><input type="text" name="height_cm" id="myInput" placeholder="" maxlength="8" aria-describedby="basic-addon1" size="8" required></div><div class="input-group-addon"><input type="text" name="height_cmd" id="myInput6" value="in" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div>\
      </div>';
    var html5 = '<div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Weight<?php echo str_repeat(' & nbsp ', 6);?></span><div class="input-group-addon"><input type="text" name="weight" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="weightd" id="myInput7" value="lbs" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Quantity&nbsp;&nbsp;</span><div class="input-group-addon"><input type="text" name="quantity" id="myInput" placeholder="" maxlength="2" size="2" aria-describedby="basic-addon1" required></div>\
      </div></div></br></br>';
    var html6 = '<div class="form-group"><label for="inputEmail3" class="col-sm-6 control-label">Item description</label><div style="padding-left: 4cm;"><textarea class="form-control" rows="5" id="comment" name="additional_detail" placeholder="Item description"></textarea></div>\
      </div></br></br></br>';
    count++;

###The function is here########

    function html1(i){
   return '<div class="row"><div class="form-group"> <label for="inputEmail3" class="col-sm-6 control-label">* Dimensions (Best Estimate):</label> <div class="col-sm-3"><select id= i+"mySelect" class="form-control"><option>ft/in/lbs</option><option>m/cm/kg</option></select></div>\
  </div></div><br>'
  }


    var str1 = "";
    for (var i = 1; i < counter; i++) {
      str1 += [html, html1(i), html2, html3, html4, html5, html6];
      str1 = str1.replace(/,/gi, "\n").replace(/^,/, "");
    }
    $("#inrlog").empty().append(str1);

  })
});

如何在jquery中创建动态id

1 个答案: