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

Question

我最初使用列表项而不是选择标记进行下拉工作。

最初的html看起来像这样：

＆＃13;

＆＃13;

$("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());
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何让它适用于多个下拉菜单？

我是在我的codepen here中完成的，但它无法正常运行，因为您可以看到它是否运行。

价值观一团糟。

Answer 1

要完成此操作，您需要使用所有相对选择器：

＆＃13;

＆＃13;

$("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());
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要通过单击的项目来区分这两个列表。

＆＃13;

＆＃13;

$("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());
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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下拉行为，通过这种行为来改变＆＃39;发出事件，因此无需在窗口小部件代码中对console.log(...)（或其他）进行硬编码。

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

<强> DEMO

或许这个更通用的版本，其中小部件代码被简化，并且在change处理程序中执行从两个跨度中提取文本。

<强> DEMO