выпадающее меню jquery с вопросом ul li

0

Код пытался в Fiddle

Я пытаюсь создать сводный список с ul li и заблокирован проблемами при заполнении элементов второго уровня. Мог бы так, чтобы я бросил какую-то идею разблокировать меня.

Проблемы: 1. Я пытаюсь выровнять Country> State> City рядом друг с другом по выбору. 2. Множественная мышь над стрельбой по предметам (пробовали с помощью мыши и не смогли добиться успеха). 3. Выбранный элемент li после 1-го уровня не отображается в текстовом поле.

<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; }
  • 1
    Пожалуйста, сделайте нашу жизнь проще, чтобы в следующий раз немедленно объяснить, что не так, вместо того, чтобы давать нам догадки. Не заставит нас расстроиться и поможет вам получить ответ как можно скорее;)
  • 1
    Итак ... что не так с этим примером? jsbin.com/aYODObu/1/edit
Показать ещё 1 комментарий
Теги:
menu
html-lists

3 ответа

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();
});
  • 0
    На самом деле я пытаюсь получить 3 вещи в соответствии с моим вопросом 1. Я пытаюсь расположить страну> Штат> Город рядом друг с другом при выборе. 2. Многократное наведение мыши на предметы (попыталось с помощью мыши и не удалось). 3. Выбранные элементы li после 1-го уровня не отображаются в текстовом поле.
1

Вы продолжаете заполнять список. Этот пример сначала проверяет: jsfiddle

Изменение заключается в том, чтобы проверить:

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

Здесь меню, которое автозаполняется

вход имеет тип поиска

Надеюсь, это полезно

Ещё вопросы

Сообщество Overcoder
Наверх
Меню