javascript - 单击按钮时选择框出现/消失

Question

搜索了一下，没有找到我要找的东西。我有两个按钮，单击一次即可拉出两个不同的选择框，第二次单击它们就会消失。但是，我希望选择框 1 在单击按钮 2 时消失，反之亦然:选择框 2 将在单击按钮 1 时消失。

HTML:

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

<button type="button" value='hide/show' onclick="button1function('name1')">Button 1</button>
<button type="button" value='hide/show' onclick="button2function('name2')">Button 2</button>

    <select id="name1">
     <option value="">What would you like to know..</option>
    </select>
    <select id="name2">
     <option value="">What would you like to know 2..</option>
    </select>

Answer 1

像这样吗？ https://jsfiddle.net/o3btLkpd/

尝试在按钮 1 的事件处理程序顶部调用此函数:

document.getElementById('name2').style.display = 'none';

这在按钮 2 的处理程序中:

document.getElementById('name1').style.display = 'none';

完整的结果代码如下所示:

  window.onload = function() { 
    document.getElementById('name1').style.display = 'none';
    document.getElementById('name2').style.display = 'none';
  };


  function button1function(id) {
    document.getElementById('name2').style.display = 'none';
    if (document.getElementById(id).style.display == 'none') {
       document.getElementById(id).style.display = 'initial';
    } else {
     document.getElementById(id).style.display = 'none';
    }
  }

  function button2function(id) {
    document.getElementById('name1').style.display = 'none';
    if (document.getElementById(id).style.display == 'none') {
       document.getElementById(id).style.display = 'initial';
    } else {
      document.getElementById(id).style.display = 'none';
    }
  }