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

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但它不能正常工作，你可以看到如果你运行它。

值(value)观乱七八糟。

Answer 1

要实现这一点，您需要使用所有相关选择器:

$("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>