html复制行删除行（带select标签中option选项的selected属性）

 

这里遇到个有意思的

第一次点击后，一切正常，第二次点击，竟然执行两次，以后越来越多

删除事件和复制事件要放在2个(function () 里面，不然unbind('click')的时候会使另外一个不可用

$(function () {
$("body").on("click", ".removeclass", function () {
debugger;
//var index = Number($(this).attr("data-index")) + 1
$(this).parents("tr").remove();
var Ida = $(this).parent().parent().find("input[name='Idls']").val()
if (Ida != null) {
var ids = ($("#delId").val() == "" ? "" : $("#delId").val() + ",") + Ida;
$("#delId").val(ids)
}
x--;
debugger;
})
})
$(document).ready(function () {
$("#SavePhy").validate();

var MaxInputs = 30; //maximum input boxes allowed
var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton = $(".AddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount = 1; //to keep track of text box added
$(AddButton).click(function (e) //on add input button click
{
if (x <= MaxInputs) //max input box allowed
{
FieldCount++; //file box added increment
//$(InputsWrapper).append('<tr class="profile-info-row"> <td class="profile-info-name" style="text-align: center"><select id="Physicalquantity_' + FieldCount + '" name="Physicalquantity" onchange="RefreshUnitTwo(' + FieldCount + ')" style="width:100px"> <option value="力（force）">力（force）</option> <option value="力（force）">力（force）</option> <option value="时间（time）">时间（time）</option> <option value="长度（length）">长度（length）</option> </select></td><td class="profile-info-name"> <input class="form-control" data-val="true" data-val-number="The field ActualData must be a number." id="ActualData_' + FieldCount + '" name="ActualData" placeholder="" type="text" value=""> </td> <td class="profile-info-name" style="text-align: center"><input class="form-control" data-val="true" data-val-number="The field adjustingData must be a number." id="adjustingData_' + FieldCount + '" name="adjustingData" placeholder="" type="text" value=""></td><td class="profile-info-name"> <select class="form-control" id="Unit_' + FieldCount + '" name="Unit"> </td> <td><a href="javascript:void(0)" class="removeclass"><i class=" ace-icon fa fa-trash-o red"></i></a></td></tr>');
$(InputsWrapper).append('<tr class="profile-info-row"> <td class="profile-info-name" style="text-align: center"><input id="Idls" name="Idls" type="hidden" value="0"><select id="Physicalquantity" name="Physicalquantity" onchange="RefreshUnit(event)" style="width:150px" data-val="true" data-val-required="this is required."> @{ foreach (var p in phyList)
{ @Html.Raw("<option value=\"" + p.Value + "\">" + p.Text + "</option>");
}} </select></td><td class="profile-info-name"> <input class="form-control" data-val="true" data-val="true" data-val-required="this is required." data-val-number="The field ActualData must be a number." id="ActualData" name="ActualData" placeholder="" type="text" value="" style="width:130px" required> </td> <td class="profile-info-name" style="text-align: center"><input class="form-control" data-val="true" data-val-number="The field adjustingData must be a number." id="adjustingData" name="adjustingData" placeholder="" type="text" value="" style="width:130px"></td><td class="profile-info-name"> <select class="form-control" id="Unit" name="Unit" style="width:80px" onchange = "UnitSelect(event)"> </td> <td> <a href="javascript:void(0)" class="select_option">复制当前行</a> </td> <td><a href="javascript:void(0)" class="removeclass"><i class=" ace-icon fa fa-trash-o red"></i></a></td></tr>');
x++; //file box increment
}
return false;
});

//$(document).on('click', ".removeclass", function (src) {
// // if (x > 1) {
// debugger;
// $(this).parent().parent().remove();
// var Ida = $(this).parent().parent().find("input[name='Idls']").val()
// if (Ida != null) {
// var ids = ($("#delId").val() == "" ? "" : $("#delId").val() + ",") + Ida;
// $("#delId").val(ids)
// }
// x--;
// debugger;
// //}
// return false;
//})
$('.select_option').off('click');
$(document).unbind('click').on('click', ".select_option", function () { //这种写法第一次点击后，一切正常，关掉页面后第二次点击，竟然执行两次，以后越来越多
// $(this).attr("data-index", index)
debugger;
var selvalueP = $(this).parents("tr").find("select[name='Physicalquantity']")[0].value;
//alert($(this).parents("tr").find("select[name='Physicalquantity']").find("option[text='" + selvalueP + "']").length)
for (var i = 0; i < $(this).parents("tr").find("select[name='Physicalquantity']")[0].length; i++) {
$(this).parents("tr").find("select[name='Physicalquantity']")[0].options[i].removeAttribute("selected");
}
for (var i = 0; i < $(this).parents("tr").find("select[name='Physicalquantity']")[0].length; i++) {
if ($(this).parents("tr").find("select[name='Physicalquantity']")[0].options[i].value == selvalueP) {
$(this).parents("tr").find("select[name='Physicalquantity']")[0].options[i].setAttribute("selected", "true");
break;
}
}
var selvalue = $(this).parents("tr").find("select[name='Unit']")[0].value;
for (var i = 0; i < $(this).parents("tr").find("select[name='Unit']")[0].length; i++) {
if ($(this).parents("tr").find("select[name='Unit']")[0].options[i].value == selvalue) {
$(this).parents("tr").find("select[name='Unit']")[0].options[i].setAttribute("selected", "true");
break;
}
}
var cloneobj = $(this).parents("tr").clone();
$(cloneobj).find("input[name='Idls']").val("0");
$(this).parents("tr").after(cloneobj);

return false;
})
});