带有内联 Onchange 函数和多个 ajax 请求的 Jquery Clone Select

Question

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

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

我需要第一个选择只为所选数字提供符号，而克隆只为所选数字提供符号。我怎样才能做到这一点？

<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]") 这将找到@987654325 @ where select 已更改，然后在此处添加您的结果。

此外，在您的 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>