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!

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!

• javascript
• html

• 3 Possible duplicate of How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)? – rrk Commented Feb 16, 2016 at 8: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 Commented Feb 16, 2016 at 8:32

2 Answers 2

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>

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