我正在創建一個表單,在其中生成動態字段。如何在jquery中創建動態ID
- 在該動態字段中,我有一個選擇選項。在該選項中,有兩個選項可用於給出尺寸爲in fit/in和其他尺寸爲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 </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的代碼,其改變該字段兩個不同的值一英尺/米其他以米/釐米爲單位
$('#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);
});
請,語法段落。 –