<div class= "button">
<button id="More" type="submit">Add Parameter</button>
<button id="Last" type="submit">Remove Parameter</button>
<button class="Manual" id="Manual" type="submit">Manually Enter </button>
</div>
</br>
<!--WHERE USER WILL INPUT WHICH VARIABLES TO READ,-->
<form action="/output3" method="post" id="parameter" >
<div2 id="Entire">
<div class="fieldBlock1" id="Original">
<fieldset style="width:215px;">
<legend>Parameter</legend>
<label >Parameter Name: </label>
<select id="name" name="name" required>
</select> </br> </br>
<label >Address: </label>
<select class= "address" type=text id="address" name="address" style="width:14em;" required>
</select> </br> </br>
<label >Data Size: </label> </br>
<select type=text id=sizeSelect name="size"style="width: 14em;" required>
</select> </br> </br>
<label >Write Data: </label> </br>
<input class="data" type=text id= "data" name="data" style="width: 14em;"> </input> </br></br>
</fieldset>
</div>
</div2>
脚本 -
//PUTTING A CAP ON PARAMETERS TO 10, CAN CHANGE CAP
$('#More').on('click', function(){
if (count==11) {
}
else {
//WILL APPEND THIS IF ADD PARAMETERS IS CLICKED
$("#Entire").append("<div class='fieldBlock' id='div'><fieldset><legend>Parameter</legend><label >Parameter Name: </label><select class= 'name' id='name' name='name' required></select></br></br><label >Address: </label><select class= 'address' type=text id='address' name='address' required></select></br></br><label >Data Size: </label> </br><select class= 'size' type=text id='sizeSelect' name='size' required></select> </br> </br><label >Write Data: </label> </br><input type=text id='data' name='data' class='data' style='width: 14em;'></br></br></fieldset></div>");
count++;
}
});
if (file && file.length) {
//FILE IS SPLIT BY COMMAS
results = file.split(",");
//WILL RESET OPTIONS IF NEW FILE IS UPLOADED
$('select').children().remove();
//ITERATE THROUGH THE FILE TO PUT PROPER PARTS IN SELECT OPTIONS
//IF FILE IS FORMATTED DIFFERENTLY THEN THIS PART WILL HAVE TO CHANGE
for (var i = 1; i < results.length; i=i+8) {
if(typeof results[i+6] !== 'undefined') {
$("select[name='name']").each(function() {
$(this).append("<option val='"+ results[i+6] +"' address='"+ results[i] +"' sizeSelect='"+ results[i+1] +"'>" + results[i+6] + "</option>");
});
}
if(typeof results[i] !== 'undefined') {
$("select[name='address']").each(function() {
$(this).append("<option val=''"+ results[i] +"''>" + results[i] + "</option>");
});
}
if(typeof results[i+1] !== 'undefined') {
$("select[name='size']").each(function() {
$(this).append("<option val=''"+ results[i+1] +"''>" + results[i+1] + "</option>");
});
}
}
}
}
//TODO----- WHEN THE NAME OF PARAMETER IS CHANGED, THE ADDRESS AND SIZE SELECT IS ALSO CHANGED. DOES NOT WORK WITH APPENDED PARAMTERS..
$(function () {
$("select[name='name']").change(function() {
var optionSelected = $(this).find('option:selected');
console.log($(this).val());
$("#address").val(optionSelected.attr('address'));
$("#size").val(optionSelected.attr('sizeSelect'));
});
});
我有一个用户上传到选择选项的文件,效果很好。我希望用户选择参数的名称,地址和数据大小会自动更改。这适用于第一个字段集,但不适用于按下更多按钮时附加的字段集。我不明白为什么它对附加部分不起作用。例如,当我按下添加参数按钮,并更改第一个参数的参数名称时,它会正确更改地址和大小。但是,当我尝试更改附加的字段集时,地址和大小不会更改。