change dropdown button text on dropdown items selection

Question

I am trying to develop drop down box list in HTML and CSS. I am trying to toggle drop-down box list on clicking on it. When I select some item, it is not coming in drop-down button.

Below is my code.

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>

I am not able to select item from drop down. I want to select any item from the drop down and that item should be selected in drop-down box list. Can someone help me to make this work? Any help would be appreciated. Thank you.

Answer 1

First remove the irrelevant code like data-toggle etc...You will need to attach a click event to the dropdown items to change the button text

Also there is no need of using div and label inside of li...so better to remove it

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

Answer 2

You don't seem to have an event for when an item is selected from the list.

You'll need to attach a click event, preferably to the li element, and set the text of the dropdown there.

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

Full code:

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>