更改下拉项目选择上的下拉按钮文本

Question

我正在尝试用 HTML 和 CSS 开发下拉框列表。我试图在单击它时切换下拉框列表。当我选择某个项目时，它不会出现在下拉按钮中。

下面是我的代码。

function toggleItems() {
  $('.dropdown-menu').toggleClass('open');
}

function test() {
  var element = document.getElementById("flat-example-2");

  if ($(element).hasClass('on')) {
    element.classList.remove("on");
  } else {
    element.classList.add("on");
  }
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 150px;
  max-height: 600px;
  overflow-x: visible;
  overflow-y: visible;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  color: #464646;
  transition: all .3s;
  transform: translate(-100%);
}

.dropdown-menu.open {
  transform: translate(0%);
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

toggle.btn-default {
  background: #dedede;
  background: rgba(0, 0, 0, 0.13);
  border: 1px solid #2E92FA;
  color: #464646;
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" onclick="toggleItems()">
  <button style="width:151px;" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Filter by<span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu" style="width:100%;">
    <li>
      <div style="margin-left:3px">
        <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox17">Sensors</label>
      </div>
    </li>
    <li>
      <div style="margin-left:3px">
        <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox18">Actuators</label>
      </div>
    </li>
    <li>
      <div style="margin-left:3px">
        <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox19">Digital inputs</label>
      </div>
    </li>
    <li>
      <div style="margin-left:3px">

        <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox20">Outputs</label>
      </div>
    </li>
    <li>
      <div style="margin-left:3px">
        <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox21">Converters</label>
      </div>
    </li>
  </ul>
</div>

我无法从下拉列表中选择项目。我想从下拉列表中选择任何项目，并且应该在下拉框列表中选择该项目。有人可以帮我完成这项工作吗？任何帮助，将不胜感激。谢谢你。

Answer 1

首先删除不相关的代码data-toggle等...您需要将点击事件附加到下拉项以更改按钮文本

也不需要使用div和label里面的 li ......所以最好将其删除

$(".btn-toggle").on("click", function() {
  $('.dropdown-menu').toggleClass('open');
});
$(".dropdown-menu li").on("click", function() {
  $('.btn-toggle').text($(this).text());
  $('.dropdown-menu').removeClass('open');
});

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 150px;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  color: #464646;
  transition: all .3s;
  transform: translate(-100%);
}

.dropdown-menu.open {
  transform: translate(0%);
}

.btn-group {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.dropdown-menu li {
  margin: 5px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
  <button class="btn-toggle" style="width:151px;" type="button">Filter by</button>
  <ul class="dropdown-menu">
    <li>Sensors</li>
    <li>Actuators</li>
    <li>Digital inputs</li>
    <li>Outputs</li>
    <li>Converters</li>
  </ul>
</div>