Drop down list after button on click

Question

I'm relatively new to both HTML and Javascript. I'm trying to figure out how to open a drop down list after clicking on one of two buttons. So far, I have for my buttons:

<button id="button1" onclick="button1function()">Button 1</button>
<button id="button2" onclick="button2function()">Button 2</button>

My list for Button 1 so far is

<select>
    <option value="jsmith">Jane Smith</option>
    <option value="jdoe">John Doe</option>
</select>

And my list for Button 2 so far is

<select>
    <option value="iwilliams">Ian Williams</option>
    <option value="arobinson">Andrew Robinson</option>
</select>

I'm also curious as to if the drop down list can disappear once you click on the button again.

Thank you all very much!

Possible duplicate of [How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?](http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due) — rrk, Feb 16 '16 at 08:26
In default hide your select dropdown by setting id for div and call it in $(document).ready(function(){ $('#id').hide()} ); Then in onclick function **button1function()** $('#id').show(); — praveen, Feb 16 '16 at 08:32

SarangaR · Answer 1 · 2016-02-17T03:10:13.037

try this

    <script type="text/javascript">
window.onload = function() 
{ 
    document.getElementById('name1').style.display = 'none';
    document.getElementById('name2').style.display = 'none';
};

function button1function(id){

    if(document.getElementById(id).style.display == 'none'){
        document.getElementById(id).style.display = 'initial';
    }else{
        document.getElementById(id).style.display = 'none';
    }
}
function button2function(id){
    if(document.getElementById(id).style.display == 'none'){
        document.getElementById(id).style.display = 'initial';
    }else{
        document.getElementById(id).style.display = 'none';
    }
}
</script>

<button id="button1" onclick="button1function('name1')">Button 1</button>
<button id="button2" onclick="button2function('name2')">Button 2</button>

<select id="name1">
    <option value="jsmith">Jane Smith</option>
    <option value="jdoe">John Doe</option>
</select>

<select id="name2">
    <option value="iwilliams">Ian Williams</option>
    <option value="arobinson">Andrew Robinson</option>
</select>

This is pretty much exactly what I'm looking for, only on the page load I don't want the drop down lists to be there. Instead, I just want it to be the two buttons there and depending on which button you're clicking on, the drop down list will toggle it's visibility. Any way that's possible? — ahuber, Feb 16 '16 at 18:01
@ahuber Yes it is possible. I have edited above code. try that — SarangaR, Feb 17 '16 at 03:11

score 0 · Answer 2 · answered Feb 16 '16 at 09:01

I have some code for you task:

<script type="text/javascript">

  function emitEvent(element, eventName) {
    var worked = false;
    if(document.createEvent) { // all browsers
      var e = document.createEvent("MouseEvents");
      e.initMouseEvent(eventName, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      worked = element.dispatchEvent(e);
    } else if (element.fireEvent) { // ie
      worked = element.fireEvent("on" + eventName);
    }
    if (!worked) { // unknown browser / error
      alert("It didn't worked in your browser.");
    }
  }

  function openDropdown(id){
      var element = document.getElementById(id);
      emitEvent(element, 'mousedown');
  }
</script>

<button id="button1" onclick="openDropdown('name1')">Button 1</button>
<button id="button2" onclick="openDropdown('name2')">Button 2</button>

<select id="name1">
    <option value="jsmith">Jane Smith</option>
    <option value="jdoe">John Doe</option>
</select>

<select id="name2">
    <option value="iwilliams">Ian Williams</option>
    <option value="arobinson">Andrew Robinson</option>
</select>

here is demo

score 0 · Answer 3 · edited May 23 '17 at 10:28

A simple modern solution

This can be done with just a few lines of plain Javascript using classList.toggle to show or hide the drop down. Click Show code and then run snippet to see how it works. There's no reason to load a large library like jQuery unless it is being used elsewhere on the page.

Also see: How to style a dropdown with CSS only without JavaScript?

for (var e of document.querySelectorAll('.dropdown button')) {
  e.addEventListener('click', function(evt) {
    evt.target.parentElement.classList.toggle('open');
  });
}

.dropdown {
  position: relative;
  display: inline-block;
  margin-right: 2em;
}
.dropdown select {
  display: none;
  position: absolute;
}
.dropdown.open select {
  display: block;
}

<div class="dropdown">
  <button>Button 1</button>
  <select>
    <option>Options 1</option>
    <option value="iwilliams">Ian Williams</option>
    <option value="arobinson">Andrew Robinson</option>
  </select>
</div>


<div class="dropdown">
  <button>Button 2</button>
  <select>
    <option>Options 2</option>
    <option value="iwilliams">Ian Williams</option>
    <option value="arobinson">Andrew Robinson</option>
  </select>
</div>

<div class="dropdown">
  <button>Button 3</button>
  <select>
    <option>Options 3</option>
    <option value="iwilliams">Ian Williams</option>
    <option value="arobinson">Andrew Robinson</option>
  </select>
</div>

<div>click to toggle the select</div>

Javascript

// Add a click handler to all dropdowns on the page
for (var e of document.querySelectorAll('.dropdown button')) {
  e.addEventListener('click', function(evt) {
    evt.target.parentElement.classList.toggle('open');
  });
}

css

.dropdown select {
  display: none;
  position: absolute;
}
.dropdown.open select {
  display: block;
}

Drop down list after button on click

3 Answers3