如何使用列表项创建多个选择器

Question

我最初有一个使用列表项而不是选择标记的下拉式工作。

最初的HTML是这样的：

$("ul").on("click", ".init", function() { 
 
    $(this).closest("ul").children('li:not(.init)').toggle(); 
 
}); 
 

 
var allOptions = $("ul").children('li:not(.init)'); 
 
$("ul").on("click", "li:not(.init)", function() { 
 
    allOptions.removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
    $("ul").children('.init').html($(this).html()); 
 
    allOptions.toggle(); 
 

 
    console.log($('.selected .value').text()); 
 
});

body { 
 
    padding: 30px; 
 
} 
 

 
ul { 
 
    height: 30px; 
 
    width: 150px; 
 
    border: 1px #000 solid; 
 
} 
 

 
ul li { 
 
    padding: 5px 10px; 
 
    z-index: 2; 
 
} 
 

 
ul li:not(.init) { 
 
    float: left; 
 
    width: 130px; 
 
    display: none; 
 
    background: #ddd; 
 
} 
 

 
ul li:not(.init):hover, 
 
ul li.selected:not(.init) { 
 
    background: #09f; 
 
} 
 

 
li.init { 
 
    cursor: pointer; 
 
} 
 

 
a#submit { 
 
    z-index: 1; 
 
} 
 

 
li { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
li, 
 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="drowpdown-one"> 
 
    <ul class="list-unstyled" style="list-style: none;"> 
 
    <li class="init">--SELECT--</li> 
 
    <li data-value="value 2"><span class="value">Durban</span><span class="numbers">1700</span></li> 
 
    <li data-value="value 3"><span class="value">Man Uni</span><span class="numbers">1400</span></li> 
 
    <li data-value="value 4"><span class="value">Durban</span><span class="numbers">1200</span></li> 
 
    </ul> 
 
</div>

我怎样才能使多个下拉菜单中工作？

我在我的codepen here中做了它，但它不能正常工作，因为你可以看到如果你运行这样的。

这些值只是乱七八糟。

Answer 1

要acccomplish这一点，你需要使用的所有相关选择：

$("ul").on("click", ".init", function() { 
 
    $(this).closest("ul").children('li:not(.init)').toggle(); 
 
}); 
 

 
var allOptions = $("ul").children('li:not(.init)'); 
 
$("ul").on("click", "li:not(.init)", function() { 
 
    ul = $(this).closest("ul"); 
 
    lis = ul.find("li:not(.init)").removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
    ul.children('.init').html($(this).html()); 
 
    lis.toggle(); 
 

 
    console.log($('.selected .value').text()); 
 
});

body { 
 
    padding: 30px; 
 
} 
 

 
ul { 
 
    height: 30px; 
 
    width: 150px; 
 
    border: 1px #000 solid; 
 
} 
 

 
ul li { 
 
    padding: 5px 10px; 
 
    z-index: 2; 
 
} 
 

 
ul li:not(.init) { 
 
    float: left; 
 
    width: 130px; 
 
    display: none; 
 
    background: #ddd; 
 
} 
 

 
ul li:not(.init):hover, 
 
ul li.selected:not(.init) { 
 
    background: #09f; 
 
} 
 

 
li.init { 
 
    cursor: pointer; 
 
} 
 

 
a#submit { 
 
    z-index: 1; 
 
} 
 

 
li { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
li, 
 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="drowpdown-one"> 
 
    <ul class="list-unstyled" style="list-style: none;"> 
 
    <li class="init">--SELECT--</li> 
 
    <li data-value="value 2"><span class="value">Durban</span><span class="numbers">1700</span></li> 
 
    <li data-value="value 3"><span class="value">Man Uni</span><span class="numbers">1400</span></li> 
 
    <li data-value="value 4"><span class="value">Durban</span><span class="numbers">1200</span></li> 
 
    </ul> 
 
    <ul class="list-unstyled" style="list-style: none;"> 
 
    <li class="init">--SELECT--</li> 
 
    <li data-value="value 2"><span class="value">Durban</span><span class="numbers">1700</span></li> 
 
    <li data-value="value 3"><span class="value">Man Uni</span><span class="numbers">1400</span></li> 
 
    <li data-value="value 4"><span class="value">Durban</span><span class="numbers">1200</span></li> 
 
    </ul> 
 
</div>

Answer 2

您需要通过您点击此项目的两个列表之间进行区分。

$("ul").on("click", ".init", function() { 
 
    $(this).closest("ul").children('li:not(.init)').toggle(); 
 
}); 
 

 

 
$("ul").on("click", "li:not(.init)", function() { 
 
    var allOptions = $(this).parents('ul').children('li:not(.init)'); 
 
    allOptions.removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
    $(this).parents('ul').children('.init').html($(this).html()); 
 
    allOptions.toggle(); 
 
    console.log($('.selected .value').text()); 
 
});

body{ 
 
    padding:30px; 
 
} 
 
ul { 
 
    height: 30px; 
 
    width: 150px; 
 
    border: 1px #000 solid; 
 
} 
 
ul li { padding: 5px 10px; z-index: 2; } 
 
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; } 
 
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; } 
 
li.init { cursor: pointer; } 
 

 
a#submit { z-index: 1; } 
 

 
li{ 
 
    display: flex; 
 
    justify-content: space-between; 
 

 
} 
 
li, ul{ 
 
    padding: 0; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="drowpdown-one"> 
 
    <ul class="list-unstyled" style="list-style: none;"> 
 
    <li class="init">--SELECT--</li> 
 
    <li data-value="value 2"><span class="value">Durban</span><span class="numbers">1700</span></li> 
 
    <li data-value="value 3"><span class="value">Man Uni</span><span class="numbers">1400</span></li> 
 
    <li data-value="value 4"><span class="value">Durban</span><span class="numbers">1200</span></li> 
 
    </ul> 
 
</div> 
 

 
<div class="drowpdown-one"> 
 
    <ul class="list-unstyled" style="list-style: none;"> 
 
    <li class="init">--SELECT--</li> 
 
    <li data-value="value 2"><span class="value">Durban</span><span class="numbers">1700</span></li> 
 
    <li data-value="value 3"><span class="value">Man Uni</span><span class="numbers">1400</span></li> 
 
    <li data-value="value 4"><span class="value">Durban</span><span class="numbers">1200</span></li> 
 
    </ul> 
 
</div> 
 

Answer 3

如果您正在使用jQuery，那么像这样的小部件最好是作为一个jQuery插件措辞。

你可能会写这样的事情，例如...

(function($) { 
    $.fn.dropdownWidget = function() { 
     return this.each(function() { 
      var $ul = $(this); 
      if($ul.filter('ul').length == 0) { 
       return true; // continue 
      } 
      var $init = $ul.children('.init').on('click', function() { 
       $allOptions.toggle(); 
      }); 
      var $allOptions = $ul.children('li').not($init).on('click', function() { 
       var $li = $(this); 
       var selectedIndex = $allOptions.filter('.selected').index(); 
       $allOptions.removeClass('selected').toggle(); 
       $li.addClass('selected'); 
       $init.html($(this).html()); 
       if(selectedIndex !== $li.index()) { // trigger `change` event only if there was a change. 
        $ul.trigger('change', { 
         'element': $li, 
         'value': $li.data('value'), 
         'textValue': $li.find('.value').text(), 
         'numbers': $li.find('.numbers').text(), 
         'text': $li.text(), 
         'selectedIndex': $li.index() - 1 // index not counting .init, therefore `- 1` 
        }); 
       } 
      }); 
     }); 
    }; 
})(jQuery); 

...让您不仅初始化两个或多个独立部件，而且还模仿标准的HTML下拉行为由一个'改变“事件，并因此避免在小部件代码中硬编码console.log(...)（或其他）。

$('#myContainer ul').dropdownWidget().on('change', function(event, data) { 
    console.log([data.value, data.textValue, data.numbers].join(', ')); 
}); 

DEMO

或者，也许这更一般化的版本，其中部件代码被简化，从两个跨度中提取文本在change处理程序进行。

DEMO