单击相应的复选框显示/隐藏下拉列表

Question

要求：在选中/取消选中第一个复选框时，我需要显示/隐藏第一个下拉菜单，类似于选中/取消选中第二个复选框，我需要显示/隐藏第二个下拉菜单。

请注意，因为复选框的这些值来自数据库，我会迭代它们以显示在前端..我只能为所有复选框设置一个共同的showMe()函数

问题：取消选中checkbox1或使用我编写的逻辑检查checkbox2时，我无法正常工作。有人可以提出一个更简洁的方法吗？

function showMe (box, box1) {
        
        var chboxs = document.getElementsByName("c1");
        var vis = "none";
        var checkedOne;
        for(var i=0;i<chboxs.length;i++) { 
            if(chboxs[i].checked){
              checkedOne = i;
              alert(checkedOne);
             vis = "block";
                break;
            }
        }
        document.getElementsByName(box)[checkedOne].style.display = vis;
    }

    <input type="checkbox" name="c1" onclick="showMe('catsndogs','parrot')">Checkbox1
    <input type="checkbox" name="c1" onclick="showMe('catsndogs','parrot')">Checkbox2
     <select name="catsndogs" style="display:none">
     <option>Select</option>
	<optgroup label="Cats">
		<option>Tiger</option>
		<option>Leopard</option>
		<option>Lynx</option>
	</optgroup>
	<optgroup label="Dogs">
		<option>Grey Wolf</option>
		<option>Red Fox</option>
		<option>Fennec</option>
	</optgroup>
</select>


    <select name="parrot" style="display:none">
    <option>Select1</option>
	<optgroup label="Bird">
		<option>Tiger</option>
		<option>Leopard</option>
		<option>Lynx</option>
	</optgroup>
</select>

Answer 1

这是否符合您的要求？

function showMe (box, box1) {
  var chkboxes = document.getElementsByName('c1');
  var selects = document.getElementsByTagName('select')
  var bools = []
  for (var i = 0; i < chkboxes.length; i++) {
    if (chkboxes[i].checked) {
      selects[i].style.display = 'block';
    } else {
      selects[i].style.display = 'none';
    }
  }

  
}

<input type="checkbox" name="c1" onclick="showMe('catsndogs','parrot')">Checkbox1
    <input type="checkbox" name="c1" onclick="showMe('catsndogs','parrot')">Checkbox2
     <select name="catsndogs" style="display:none">
     <option>Select</option>
	<optgroup label="Cats">
		<option>Tiger</option>
		<option>Leopard</option>
		<option>Lynx</option>
	</optgroup>
	<optgroup label="Dogs">
		<option>Grey Wolf</option>
		<option>Red Fox</option>
		<option>Fennec</option>
	</optgroup>
</select>


    <select name="parrot" style="display:none">
    <option>Select1</option>
	<optgroup label="Bird">
		<option>Tiger</option>
		<option>Leopard</option>
		<option>Lynx</option>
	</optgroup>
</select>

Answer 2

纯粹的js方法;将每个复选框与下拉列表相关联并相应地切换显示。

window.onload = () =>  loadFunctions();

loadFunctions = () => {
   document.getElementById('check1').onclick = () =>   toggle('drop1','blockDis');
   document.getElementById('check2').onclick = () =>   toggle('drop2','blockDis');
}


toggle = (divId,className) => {
   let isPresent = document.getElementById(divId).classList.contains(className);
   if(!isPresent) document.getElementById(divId).classList += className;
   else document.getElementById(divId).classList -= className;
}

select {
  display:none;
}
.blockDis {
  display : block;
}

<input type='checkbox'/ id="check1"> Box 1
<input type='checkbox'/id="check2"> Box 2
<select id="drop1">
<option>Dropdown 1</option>
</select>
<select id="drop2">
<option>Dropdown 2</option>
</select>

Answer 3

这很有效。

function showMe (elem, box)
{
  if(elem.checked)
  {
     vis = "block";
  }
  else
  {
      vis="none";
  }
  document.getElementsByName(box)[0].style.display = vis;
}

<input type="checkbox" name="c1" onclick="showMe(this, 'catsndogs')">Checkbox1
<input type="checkbox" name="c1" onclick="showMe(this, 'parrot')">Checkbox2
<select name="catsndogs" style="display:none">
<option>Select</option>
	<optgroup label="Cats">
		<option>Tiger</option>
		<option>Leopard</option>
		<option>Lynx</option>
	</optgroup>
	<optgroup label="Dogs">
		<option>Grey Wolf</option>
		<option>Red Fox</option>
		<option>Fennec</option>
	</optgroup>
</select>


<select name="parrot" style="display:none">
<option>Select1</option>
	<optgroup label="Bird">
		<option>Tiger</option>
		<option>Leopard</option>
		<option>Lynx</option>
	</optgroup>
</select>

Answer 4

＆＃13;

＆＃13;

function showMe (selectName) {
    var select = document.querySelector("select[name='" + selectName + "']"); 
    
    if(event.target.checked){
      select.classList.add('show');
    }
    else{
     select.classList.remove('show');
    }    
}

＆＃13;

select{
 display:none;
}

.show{
 display:block;
}

＆＃13;

<input type="checkbox" name="c1" onclick="showMe('catsndogs')">Checkbox1
<input type="checkbox" name="c1" onclick="showMe('parrot')">Checkbox2

<select name="catsndogs">
  <option>Select</option>
	<optgroup label="Cats">
		<option>Tiger</option>
		<option>Leopard</option>
		<option>Lynx</option>
	</optgroup>
	<optgroup label="Dogs">
		<option>Grey Wolf</option>
		<option>Red Fox</option>
		<option>Fennec</option>
	</optgroup>
</select>


<select name="parrot">
  <option>Select1</option>
	<optgroup label="Bird">
		<option>Tiger</option>
		<option>Leopard</option>
		<option>Lynx</option>
	</optgroup>
</select>

＆＃13;

＆＃13;

＆＃13;