使用计数器更改选择数组名称
Change select array name with a counter
我正在尝试更改3个选择框的名称,我得到了正确更改的输入名称,但我对选择框感到困惑。如果在克隆文本字段name后检查fiddle,则每次克隆时都会添加一个数字。我希望选择框也能如此。有人能帮我做这个吗?
Html:
<table align="left" id="show2">
<tr>
<td align="left" colspan="2" align="center">
<div class="employmentHistory">
<table width="700px" class="employmentHistoryForm" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<table class="medication_Group" align="left" style="padding-left: 50px;">
<tr class="row2">
<td class="text-fields" align="right">Dose value</td>
<td align="left" class="text-fields">
<input style="width: 60px;" value="" class="admin-input" type="text" name="dose_value[]" />
<select style="width: 70px;" class="select-input" name="dose[]">
<option selected value="0">Dose</option>
<option value="g">g</option>
<option value="Mg">Mg</option>
<option value="μg">μg</option>
<option value="ml">ml</option>
<option value="Drops">Drops</option>
<option value="Amps">Amps</option>
<option value="Puffs">Puffs</option>
</select>
<select style="width: 95px;" class="select-input" name="frequency[]">
<option selected value="0">Frequency</option>
<option value="Daily">Daily</option>
<option value="Bd">Bd</option>
<option value="Tds">Tds</option>
<option value="Qid">Qid</option>
<option value="4 hourly">4 hourly</option>
<option value="Nocte">Nocte</option>
<option value="Alternate day">Alternate day</option>
<option value="Weekly">Weekly</option>
</select>
<select style="width: 70px;" class="select-input" name="route[]">
<option selected value="">Route</option>
<option value="PO">PO</option>
<option value="PR">PR</option>
<option value="S/C">S/C</option>
<option value="IM">IM</option>
<option value="IV">IV</option>
<option value="Eyes">Eyes</option>
<option value="Nebs">Nebs</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="left" colspan="2" style="padding-left: 300px;"><span style="cursor: pointer; color: #007FC6; font-weight: bold;" id="btnAddMore" value="add more">Add another Medication</span>
</td>
</tr>
</table>
Javascript:
$(document).ready(function () {
//This line clones the row inside the '.row' class and transforms it to plain html.
var clonedRow = $('.row2').clone().html();
//This line wraps the clonedRow and wraps it <tr> tags since cloning ignores those tags
var appendRow = '<tr class = "row2">' + clonedRow + '</tr>';
var counter = 0;
$('#btnAddMore').click(function () {
//this line get's the last row and appends the appendRow when it finds the correct row.
$('.employmentHistoryForm tr:last').after(appendRow);
counter++;
$('.employmentHistoryForm tr:last input[type="text"]').attr('name', 'dose_value[' + 'a' + counter + ']');
$('.employmentHistoryForm tr:last select').attr('name', 'dose[' + 'a' + counter + ']');
$('.employmentHistoryForm tr:last select').attr('name', 'frequency[' + 'a' + counter + ']');
$('.employmentHistoryForm tr:last select').attr('name', 'route[' + 'a' + counter + ']');
$('.employmentHistoryForm tr:last').find('input').val('');
});
//when you click on the button called "delete", the function inside will be triggered.
$('.deleteThisRow').live('click', function () {
var rowLength = $('.row2').length;
//this line makes sure that we don't ever run out of rows.
if (rowLength > 1) {
deleteRow(this);
} else {
$('.employmentHistoryForm tr:last').after(appendRow);
deleteRow(this);
}
});
function deleteRow(currentNode) {
$(currentNode).parent().parent().remove();
}
});
我添加了我的代码:http://jsfiddle.net/H9w7d/3/
请尝试以下操作。希望这能帮助。。。
$('.employmentHistoryForm tr:last select option').each(
function(){
this.value = this.value +'[a'+counter+']';
}
)
相关文章:
- Jquery 读取编号组中选择下拉列表的数组
- Javascript:从数组中的对象中选择属性
- Javascript没有从数组中选择背景颜色
- 如何从数组中选择特定标记
- 使用JavaScript或jQuery检查单选按钮选择是否与数组中的项目匹配
- jquery从多维数组中进行动态相关选择
- 如何在javascript中使用click函数选择数组元素
- 构建HTML选择字段并使用JavaScript数组选择选项
- 将增量计数器连接到 JSON 响应循环中的数组选择器的末尾
- 使用 jQuery 使用 id 数组选择元素
- Jquery循环数组选择器与自定义元素ID的
- 转换后的 JSON 数组选择
- 对象数组-选择数组子集,其中对象属性为值数组
- knockoutjsforeach数组选择项值绑定
- 数组选择中的Javascript对象
- 按属性值的数组选择器函数
- 警告JS数组选择
- Javascript 和 HTML mix(数组选择)
- 作为jquery变量的值数组选择器
- 统一更新数组选择值