如何使用jquery创建MultiLevel动态下拉菜单 [英] How to create MultiLevel Dynamic dropdown using jquery

问题描述

我试图创建多级下拉菜单。

我有默认的下拉列表，其值为

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

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

'Ex。我创建如下'

  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 =''; $（。ddlFormType）。live（click，function（）{selectedId =＃+ $（this）.prop（'id'）;}）;
$ b $ （'url：Url +'Method /'+（selectedId）.val（），类型：'GET'，dataType：' json'，cache：false，timeout：9000，success：function（data）{$（＃detailTable tbody）。append（createdropdown（currentId））;}
}）;

'但是.change事件没有被解雇，因为dyncamically创建了下拉菜单''''''''

'希望你能理解吗？'

解决方案

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

如果您想添加N个选择，您应该包含一个调用以在您添加到DOM的代码中注册它，请检查此示例：

 < div id =select-container>< / div> 
 
< script> 
函数CreateSelect（id）{
 return`< select id =ddl` + id +`> 
< option value =Opcion> Opcion< \ / option> 
< option value =Opcion2> Opcion 2< \ / option> 
< \ / select> 
< script> 
 RegisterSelectChangeEvent（`+ id +`）; 
< \ / script>`; 
 
 
函数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

I am trying to create Multilevel Dropdown.

I have default dropdown with values

Ex. Parent Dropdown with Id='ddl1'

If we select value from it then load data from server with selected and Create new dropdown name as child dropdown, and again select value from child and load data from server, if data present then create child dropdown.

we have to create drowpdown, till n level.

'Ex. i am creating like below'

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=''; $(".ddlFormType").live("click", function () { selectedId= "#" + $(this).prop('id'); });

$(selectedId).live("change", function () { $.ajax({ url: Url + 'Method/' + (selectedId).val(), type: 'GET', dataType: 'json', cache: false, timeout: 9000, success: function (data) { $("#detailTable tbody").append(createdropdown(currentId)); } });

'But .change event not get fired, for dyncamically created dropdown'

'Hope you can understand?'

解决方案

It think your problem is that you are creating the select after the DOM has been fully loaded and jQuery has already registered all events.

If you want to add dinamically N selects you should include a call to register it inside the code you are adding to the DOM, check this sample:

  <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>

You can see it working here:

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

这篇关于如何使用jquery创建MultiLevel动态下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！