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

时间：2018-03-19 09:00:43

标签： javascript jquery html css

我正在尝试开发HTML和CSS中的下拉框列表。我试图在点击它时切换下拉框列表。当我选择一些项目时，它不会进入下拉按钮。

以下是我的代码。

＆＃13;
＆＃13; 
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");
  }
}
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我无法从下拉列表中选择项目。我想选择任何项目 从下拉列表中，应该在下拉框中选择该项目 名单。有人可以帮助我做这项工作吗？任何帮助都会 赞赏。谢谢。

2 个答案:

答案 0 :(得分：3)

首先删除不相关的代码，例如data-toggle等...您需要在下拉项目中附加点击事件以更改按钮文字

此外，无需在li内部使用div和label ...所以最好将其删除

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

答案 1 :(得分：0)

从列表中选择项目时似乎没有事件。

您需要附加点击事件，最好是li元素，并设置下拉文本。

e.g。

$('.dropdown-menu li').click(function() {
  var text = $(this).text(); // get text of the clicked item
  $(".dropdown-toggle").text(text); // set text to the button (dropdown)
});

完整代码：

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

$('.dropdown-menu li').click(function() {
  var text = $(this).text(); // get text of the clicked item
  $(".dropdown-toggle").text(text); // set text text to the button (dropdown)
});

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>

相关问题
最新问题