Jquery克隆选择与内联Onchange函数和多个ajax请求

Question

我有一个选择下拉列表，其中填充了来自ajax请求的numbers14。当从下拉框中选择一个数字时，将填充2个符号作为选项。这些符号是onchange函数附加到select的结果，并使用另一个ajax请求来获取这些符号。

我需要克隆选择下拉菜单并根据所选数字填充新标志。首先在页面上只能看到选择，然后在进行选择时，应该出现符号。我需要它是相同的显示与选择和签名选项的新id每个克隆。我的问题是，添加新的id到克隆函数不与onchange请求工作在所有。在克隆中不显示任何标志，并向Sign函数添加新id，使两个选择在选择时都更改两组标志。新的标志不会出现。

我需要第一个选择只提供所选数字的标志，克隆只提供所选数字的标志。我怎样才能做到这一点呢?

<form id=entry1"> 
<select class="select_sign select_ttl w-100" name="SignID" id="signId" onchange='GetSign(this)' data-request-url="@Url.Action("GetJsonSignNumbers", "Product")"></select>
<div  id="box-1" name='show'></div>
</form>
<button> Clone</button>

//Populate route dropdownlist
var signNumber = $(".select_sign");
signNumber.empty().append('<option value="" selected="selected" disabled="disabled">Loading.....</option>');
$.ajax({
    url: signNumber.data('request-url'),
    dataType: "json",
    type: "GET",
    success: function (response) {
        ddlroute.empty().append('<option value="" selected="selected" disabled="disabled">Sign</option>');
        $.each(response, function () {
            signNumber.append($("<option></option>").val(this['Value']).html(this['Text']));
        });
    }
});
function GetSign(sign) {

    $.ajax({
        url: "/Product/GetJsonsign",
        dataType: "json",
        type: "GET",
        data: { id: sign.value },
        success: function (data) {
            var items = ""
            data = '
                    <div class="row btn-group-sm " data-toggle="buttons">
                        <div class="col-md-6 mb-3">
                            <div>
                                <label class="btn btn-outline-danger btn-raised sign-label-0 w-100 active" for="data[0].sign0" style="border - radius: 0!important; " checked>' + data[0].sign0 + '
                                    <input class="input_sign_0" type="radio" name="Sign" id="data[0].sign0" value="' + data[0].sign0 + '" autocomplete="off">
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                                          <div>
                                <label class="btn btn-outline-danger btn-raised sign-label-1 w-100" for="data[0].sign1" style="border-radius:0 !important; ">' + data[0].sign1 + '
                                    <input class="input_sign_1" type="radio" name="Sign" id="data[0].sign1" value="' + data[0].sign1 + '" autocomplete="off">
                                </label>
                            </div>
                        </div>
                    </div>';
            items = data;
            $("div[name=show]").html(items);
        }
           
    });
}
function Sign(sign) {

    $.ajax({
        url: "/Product/GetJsonsign",
        dataType: "json",
        type: "GET",
        data: { id: sign.value },
        success: function (data) {
            var items = ""
            data = '
                    <div class="row btn-group-sm " data-toggle="buttons">
                        <div class="col-md-6 mb-3">
                            <div>
                                <label class="btn btn-outline-danger btn-raised sign-label-0 w-100 active" for="data[0].sign0" style="border - radius: 0!important; " checked>' + data[0].sign0 + '
                                    <input class="input_sign_0" type="radio" name="Sign" id="data[0].sign0" value="' + data[0].sign0 + '" autocomplete="off">
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                                          <div>
                                <label class="btn btn-outline-danger btn-raised sign-label-1 w-100" for="data[0].sign1" style="border-radius:0 !important; ">' + data[0].sign1 + '
                                    <input class="input_sign_1" type="radio" name="Sign" id="data[0].sign1" value="' + data[0].sign1 + '" autocomplete="off">
                                </label>
                            </div>
                        </div>
                    </div>';
            items = data;
            $("div[name=show]").html(items);
        }
           
    });
}
function cloneForm() {
    var num = $(".clonedInput").length;
    var newNum = new Number(num + 1);
    var newForm = $("#entry" + num).clone()
        .attr("id", "entry" + newNum);
   newForm
        .find("#box-1").empty();
    newForm
        .find(".input_sign_0")
        .attr("id", "Sign" + newNum + "_ID-0")
        .attr("name", "Sign" + newNum + "")
        .val([]);
    newForm
        .find(".input_sign_1")
        .attr("id", "Sign" + newNum + "_ID-1")
        .attr("name", "Sign" + newNum + "")
        .val([]);
}
$('button').click(function(){
cloneForm();
}

Answer 1

在您的GetSign函数中，您使用$("div[name=show]")来添加来自ajax的结果，这将针对所有找到匹配的div，而不是您已经在函数中传递this，您可以使用$(sign).closest("form").find("div[name=show]")，这将找到div，其中选择已更改，然后添加您的结果。

同样，在你的cloneForm()函数中，你得到了clonedInputs的长度，但没有这样的类。所以，你可以只设置form和add 1的长度，然后将这个新值添加到新形式的id中。

演示代码 :

var signNumber = $(".select_sign");
signNumber.empty().append('<option value="" selected="selected" disabled="disabled">Loading.....</option>');
/*$.ajax({
 //some codes....
 ddlroute.empty().append('<option value="" selected="selected" disabled="disabled">Sign</option>');*/
//just for demo...
signNumber.empty().append('<option value="" selected="selected" disabled="disabled">Sign</option>');
signNumber.append($("<option></option>").val(1).html("abc"));
signNumber.append($("<option></option>").val(2).html("abc2"));
/*$.each(response, function() {
    //some..other codes..
});*/
function GetSign(sign) {
  /* $.ajax({
     //some codes..
     success: function(data) {*/
  var items = "";
  data = ' <div class="row btn-group-sm " data-toggle="buttons"><div class="col-md-6 mb-3"><div> <label class="btn btn-outline-danger btn-raised sign-label-0 w-100 active" for="data[0].sign0" style="border - radius: 0!important; " checked> 1 <input class="input_sign_0" type="radio" name="Sign" id="data[0].sign0" value="1" autocomplete="off"></label></div></div> <div class="col-md-6 mb-3"> <div><label class="btn btn-outline-danger btn-raised sign-label-1 w-100" for="data[0].sign1" style="border-radius:0 !important; ">2 <input class="input_sign_1" type="radio" name="Sign" id="data[0].sign1" value="2" autocomplete="off"> </label>
</div> </div> </div>';
  items = data;
  //get closest form then name div ...add result there
  $(sign).closest("form").find("div[name=show]").html(items);
  /*}
  });*/
}
$('button').click(function() {
  cloneForm();
})

function cloneForm() {
  //check length of form
  var newNum = $("#all_divs form").length + 1;
  //clone first form
  var newForm = $("#all_divs form:first").clone()
    .attr("id", "entry" + newNum);
  newForm.attr("class", "clonedInput");
  newForm
    .find("[name=show]").empty();
  //append to div
  $(newForm).appendTo($("#all_divs"))
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="all_divs">
  <form id="entry1">
    <select class="select_sign select_ttl w-100" name="SignID" id="signId" onchange='GetSign(this)' data-request-url="@Url.Action(" GetJsonSignNumbers ", "Product ")"></select>
    <div id="box-1" name='show'></div>
  </form>
</div>
<button> Clone</button>