我有一些代码为您的任务：

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

这里是demo

简单现代的解决方案

只需几行普通的Javascript就可以完成，使用classList.toggle来显示或隐藏下拉菜单。单击Show code，然后运行snippet来查看它是如何工作的。没有理由加载像jQuery这样的大型库，除非它在页面的其他地方被使用。

• 另请参阅：* 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;
}

试试这个

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