Question

我正在尝试创建多级下拉。

我的默认下拉列表中包含值

实施例。家长下拉列表ID =＆＃39; ddl1＆＃39;

如果我们从中选择值，则从服务器加载数据并选择并创建新的下拉列表作为子下拉列表，然后再次从子项中选择值并从服务器加载数据，如果存在数据则创建子下拉列表。

我们必须创建drowpdown，直到n级。

＆＃39;实施例。我创建如下＆＃39;

function createdropdown(id) {

 var labelHtml = "<tr id='trFormType" + id + "' class='trFormType'><td><label class='tdLabel'>" + labelFormType + " * </label></td>";
 labelHtml += "<td><select class='ddlFormType' id='ddlFormType" + id + "' name='ddlFormType" + id + "'  >";
    labelHtml  += "<option value=''";
    labelHtml += ">" + labelSelect + "</option>";
    labelHtml += "</select></td></tr>";

    return labelHtml;
}

var selectedId =＆＃39;＆＃39 ;; $（＆＃34; .ddlFormType＆＃34;）。live（＆＃34; click＆＃34;，function（）{selectedId =＆＃34;＃＆＃34; + $（this）.prop（＆＃39 ; id＆＃39;）;}）;

$（selectedId）.live（＆＃34;更改＆＃34;，function（）{$ .ajax（{url：Url +＆＃39;方法/＆＃39; +（selectedId）.val（），键入：＆＃39; GET＆＃39;，dataType：＆＃39; json＆＃39;，cache：false，timeout：9000，success：function（data）{$（＆＃34; #detailTable tbody＆＃34; ）.append（createdropdown（currentId））;} }）;

＆＃39;但是.change事件不会被触发，对于dyncamically创建的下拉列表＆＃39;

＆＃39;希望你能理解？＆＃39;

Answer 1

要创建n级下拉列表，您需要在ajax回调中创建一个下拉列表，如下所示：

 $.ajax({
    url: "Your URL",
    method: "GET",
    dataType: 'json',
    success: function (data) {
       $("Your Dropdown Conatiner").append("<select><option name="option1" value="1"></option>...</select>");
    },
    error: function (data) {

    }
});

Answer 2

它认为你的问题是你在DOM完全加载并且jQuery已经注册了所有事件之后创建了select。

如果你想添加dinamically N选择你应该包含一个调用，在你要添加到DOM的代码中注册它，检查这个样本：

  <div id="select-container"></div>

  <script>
    function CreateSelect(id){
        return `<select id="ddl` + id +  `">
                    <option value="Opcion">Opcion<\/option>
                    <option value="Opcion2">Opcion 2<\/option>
                <\/select>
                <script>
                    RegisterSelectChangeEvent(` + id + `);
                <\/script>`;
    }

    function RegisterSelectChangeEvent(id){
      console.log("Event Raised");
      $("#ddl" + id).on("change", function (e) {
          jQuery("#select-container").append(CreateSelect(id+1));
      });
    }

    (function(){
         jQuery("#select-container").append(CreateSelect(1));
    })();
  </script>

你可以看到它在这里工作：

https://codepen.io/anon/pen/LQRqYY

如何使用jquery创建MultiLevel Dynamic下拉列表

2 个答案: