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!

Answer 1

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>

Answer 2

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

Answer 3

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