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 ing 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=".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 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 ing 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./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.

• javascript
• jquery
• html
• css

• can't say I really know what you're trying to trigger in the first place. But there's also no other function being called besides toggleItems – A. L Commented Mar 19, 2018 at 9:05
• i just tested your code and it working – Abslen Char Commented Mar 19, 2018 at 9:06
• Whenever i select any item that should appear in drop down box list. It is not happening now. – Niranjan Commented Mar 19, 2018 at 9:08
• are you using bootstrap...?...as there are bootstrap classes in your code..? – Bhuwan Commented Mar 19, 2018 at 9:09
• No I am not using bootstrap. I am using my own css class. – Niranjan Commented Mar 19, 2018 at 9:09

2 Answers 2

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

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