带有ul li问题的jquery下拉菜单

Question

Code tried in Fiddle

我正在尝试使用ul li创建一个drodown列表，并且在填充第二级项目时遇到问题。我可以这样做一个想法来打扰我。

问题： 1.我正在努力调整国家＆gt;状态＆gt;城市紧挨着选择。 2.多个鼠标在项目上点火（尝试使用mouseenter并且无法成功）。 3.第一级后的选定项目不会显示在文本框中。

<div><span><input type="text" id="selectText"></span><span id="toggle"> V </span></div>
<ul id="menu" style="display:none">
   <li class="level1">
    <a href="#">Country1</a>
     <ul id="ulLevel1">         
     </ul>
    </li>
   <li class="level1"><a href="#">Country2</a></li>
    <li class="level1">
    <a href="#">Country3</a>
    <ul>
      <li><a href="#">State1</a></li>

</ul>

 var countries =  [
{"name": "India", "code": "AF"}, 
{"name": "Usa", "code": "AX"}, 
{"name": "China", "code": "AL"}
]
var states =  [
{"name": "Andhra", "cntrycode": "AF"}, 
{"name": "Karnataka", "cntrycode": "AX1"}, 
{"name": "Kashmir", "cntrycode": "AL"}
]
var cities =  [
{"name": "Hyderabad", "statecode": "AF"}, 
{"name": "Secbad", "statecode": "AX"}, 
{"name": "Ameerpet", "statecode": "AF"}
]

//Show hide drop down values
$( "#toggle" ).click(function() {
    $( "#menu" ).menu();
    $( "#menu" ).toggle();
    });

// Show selected value in dropdown textbox
$( "li a,li.level1 a" ).click(function() {
    $('#selectText').val('');
    var selText = $(this).text();
    $('#selectText').val(selText);
    $( "#menu" ).toggle();
    });

// populate states ul and Append inside countries li
$( "li.level1 a" ).mouseover(function() {
   var stateitems = [];
       $.each(states, function(i, stateitem) {       
          stateitems.push('<li id=level2><a href="mylink?id=' + stateitem.ID + '">' + stateitem.name + '</a>'+
                         '<ul id=ulLevel2></ul>'
                         +'  </li>');
   });

   $("#ulLevel1").append(stateitems); 

    }); 

// populate cities ul and Append inside states li

$("li").on("mouseover", "#level2 a", function() {

   var cityitems = [];
       $.each(cities, function(i, cityitem) {       
          cityitems.push('<li id=level3><a href="mylink?id=' + cityitem.ID + '">' + cityitem.name + '</a>'+
                         '<ul id=ulLevel3></ul>'
                         +' </li>');

   }); 

    $("#ulLevel2").append(cityitems);
    });

.ui-menu { width: 250px; }
ul li { background-color: gray; }

Answer 1

你可能想要这样的东西吗？

的 LIVE DEMO 的

var countries =  [
{"name": "India", "code": "AF"}, 
{"name": "Usa", "code": "AX"}, 
{"name": "China", "code": "AL"}
];
var states =  [
{"name": "Andhra", "cntrycode": "AF"}, 
{"name": "Karnataka", "cntrycode": "AX1"}, 
{"name": "Kashmir", "cntrycode": "AL"}
];
var cities =  [
{"name": "Hyderabad", "statecode": "AF"}, 
{"name": "Secbad", "statecode": "AX"}, 
{"name": "Ameerpet", "statecode": "AF"}
];

// populate states ul and Append inside countries li
var stateitems = "";
$.each(states, function(i, si) {       
    stateitems += '<li id="level2"><a href="mylink?id='+ si.ID +'">'+ si.name +'</a><ul id="ulLevel2"></ul></li>';
});   
$("#ulLevel1").append(stateitems); 

// populate cities ul and Append inside states li
var cityitems = "";
$.each(cities, function(i, ci) {       
    cityitems += '<li id="level3"><a href="mylink?id='+ ci.ID +'">'+ ci.name +'</a><ul id="ulLevel3"></ul></li>';
});     
$("#ulLevel2").append(cityitems);

// ---------------------

$( "#menu" ).menu();

//Show hide drop down values
$( "#toggle" ).click(function() {
    $( "#menu" ).toggle(); 
});

// Show selected value in dropdown textbox
$("#menu").on('click', 'li a, li.level1 a', function() {
    $('#selectText').val('');
    var selText = $(this).text();
    $('#selectText').val(selText);
    $( "#menu" ).toggle();
});

Answer 2

您继续填充列表。此示例将首先检查： jsfiddle

更改是检查：

 if( $("#ulLevel1").children().length == 0 )

Answer 3

Here's a menu that autocomplete

输入的搜索类型为

我希望它有用