Question

大家好：所以我正在开发一个项目，用户将选择一个下拉菜单选项，然后打开一系列复选框。它一直工作到现在，无论什么时候都会显示一些复选框，当我选择一个下拉选项时，它不会显示任何内容。到目前为止，这是我的代码：

<select id="select" onchange="test(this)">
    <option>hi0</option>
    <option>hi1</option>
    <option>hi2</option>
    <option>hi3</option>
    <option>hi4</option>
    <option>hi5</option>
    <option>hi6</option>
    <option>hi7</option>
</select>

<form id="option1">
<input type="checkbox" name="Color" value="School Color">The  are a solid school color.
<br>
<input type="checkbox" name="Hem" value="Hem">The  are hemmed.
<br>
<input type="checkbox" name="Size" value="Size">The pants are not to big or small.
<br>
<input type="checkbox" name="Style" value="Style">The pants are not sweats or jogging style.
</form>

<form id="option2">
<input type="checkbox" name="Color" value="School Color">The shorts are a solid school color.
<br>
<input type="checkbox" name="Length" value="Length">The shorts are not shorter than your fingertip, or longer than your knees. (Capris okay.)
</form>

<form id="option3">
<input type="checkbox" name="Color" value="School Color">The skirt is a solid school color.
<br>
<input type="checkbox" name"Length" value="Length">The skirt is not shorter than your fingertip.
</form>

<form id="option4">
<input type="checkbox" name="Color" value="School Color">The shirt is a solid school color.
<br>
<input type="checkbox" name="Collar" value="Collar">The shirt has a collar or a turtleneck.
<br>
<input type="checkbox" name="Tuck" value="Tuck">The shirt is long enough to be tucked in.
<br>
<input type="checkbox" name="Logo" value="Logo">The shirt has no logos-Baird logo is accepted.
</form>

<form id="option5">
<input type="checkbox" name="Color" value="School Color">The belt is a solid school color.
<br>
<input type="checkbox" name="Decorations" value="Decorations">The belt has no studs or decorations.
<br>
<input type="checkbox" name="Buckle" value="Buckle">The belt buckle is solid.
<br>
<input type="checkbox" name="Excess" value="Excess">The belt has no excess length (does not hang down).
</form>

<form id="option6">
<input type="checkbox" name="Color" value="School Color">Hair accessories are a solid school color.
</form>

<form id="option7">
<input type="checkbox" name="Color" value="School Color">The shoes and laces are a solid school color.<br>
<input type="checkbox" name="Strap" value="Strap">If the shoes are sandals, they have a back strap.<br>
<input type="checkbox" name="Style" value="Style>The shoes are not high heels, platforms, or steel-toed.
</form>

这里是css和javascript：

<head>
<style>
#option1 {
display: none;
}
#option2 {
display: none;
}
#option3 {
display: none;
}
#option4 {
display: none;
}
#option5 {
display: none;
}
#option6 {
display: none;
}
#option7 {
display: none;
}
</style>

<script language="javascript">
// simple <select> / onchange

function test(e) {
    var i = e.selectedIndex;
   if (i == 1) document.querySelector("#option1").style.display=
"block";
   if (i == 2) document.querySelector("#option2").style.display=
"block";
   if (i == 3) document.querySelector("#option3").style.display= "block";
   if (i == 4) document.querySelector("#option4").style.display=
"block";
   if (i == 5) document.querySelector("#option5").style.display=
"block";
   if (i == 6) document.querySelector("#option6").style.display=
"block";
   if (i == 7) document.querySelector("#option7").style.display=
"block";
}
</script>
</head>

我意识到这很多，但任何人都可以提供建议，以保持第一组复选框无论显示什么，以及为什么它们不会打开？任何帮助表示赞赏！

Answer 1

我个人建议：

function test(el){
    // gets all form-elements:
    var forms = document.querySelectorAll('form');

    // iterates over all the form-elements, hiding them
    [].forEach.call(forms, function(a){
        a.style.display = 'none';
    });

    // retrieves the form-element with the given 'id', and shows it:
    document.querySelector('#option' + (el.selectedIndex)).style.display = 'block';
}

JS Fiddle demo

以上内容确实需要一个相当最新的浏览器（但由于您已经在使用document.querySelector()，因此我将兼容性视为给定），以便使用document.querySelectorAll()和{{ 1}}。

参考文献：

Answer 2

<head>
<style>
#option1 {
display: none;
}
#option2 {
display: none;
}
#option3 {
display: none;
}
#option4 {
display: none;
}
#option5 {
display: none;
}
#option6 {
display: none;
}
#option7 {
display: none;
}
</style>

<script language="javascript">
// simple <select> / onchange

function test(e) {

  // start init div area.
  document.getElementById("option1").style.display="none";
  document.getElementById("option2").style.display="none";
  document.getElementById("option3").style.display="none";
  document.getElementById("option4").style.display="none";
  document.getElementById("option5").style.display="none";
  document.getElementById("option6").style.display="none";
  document.getElementById("option7").style.display="none";
  // end init div area.

  // view selected area. ( easy way from jquery. - selector )

   var i = e.selectedIndex;
     if (i == 1) document.getElementById("option1").style.display="block";
     if (i == 2) document.getElementById("option2").style.display="block";
     if (i == 3) document.getElementById("option3").style.display="block";
     if (i == 4) document.getElementById("option4").style.display="block";
     if (i == 5) document.getElementById("option5").style.display="block";
     if (i == 6) document.getElementById("option6").style.display="block";
     if (i == 7) document.getElementById("option7").style.display="block";
}
</script>
</head>

<select id="select" onchange="test(this)">
    <option>Clothing Type</option>
    <option>Pants</option>
    <option>Shorts</option>
    <option>Skirts</option>
    <option>Shirts,Blouses</option>
    <option>Belts</option>
    <option>Hair Adornments</option>
    <option>Shoes</option>
</select>

<form id="option1">
<input type="checkbox" name="Color" value="School Color">The pants are a solid school color.
<br>
<input type="checkbox" name="Hem" value="Hem">The pants are hemmed.
<br>
<input type="checkbox" name="Size" value="Size">The pants are not to big or small.
<br>
<input type="checkbox" name="Style" value="Style">The pants are not sweats or jogging style.
</form>

<form id="option2">
<input type="checkbox" name="Color" value="School Color">The shorts are a solid school color.
<br>
<input type="checkbox" name="Length" value="Length">The shorts are not shorter than your fingertip, or longer than your knees. (Capris okay.)
</form>

<form id="option3">
<input type="checkbox" name="Color" value="School Color">The skirt is a solid school color.
<br>
<input type="checkbox" name"Length" value="Length">The skirt is not shorter than your fingertip.
</form>

<form id="option4">
<input type="checkbox" name="Color" value="School Color">The shirt is a solid school color.
<br>
<input type="checkbox" name="Collar" value="Collar">The shirt has a collar or a turtleneck.
<br>
<input type="checkbox" name="Tuck" value="Tuck">The shirt is long enough to be tucked in.
<br>
<input type="checkbox" name="Logo" value="Logo">The shirt has no logos-Baird logo is accepted.
</form>

<form id="option5">
<input type="checkbox" name="Color" value="School Color">The belt is a solid school color.
<br>
<input type="checkbox" name="Decorations" value="Decorations">The belt has no studs or decorations.
<br>
<input type="checkbox" name="Buckle" value="Buckle">The belt buckle is solid.
<br>
<input type="checkbox" name="Excess" value="Excess">The belt has no excess length (does not hang down).
</form>

<form id="option6">
<input type="checkbox" name="Color" value="School Color">Hair accessories are a solid school color.
</form>

<form id="option7">
<input type="checkbox" name="Color" value="School Color">The shoes and laces are a solid school color.<br>
<input type="checkbox" name="Strap" value="Strap">If the shoes are sandals, they have a back strap.<br>
<input type="checkbox" name="Style" value="Style>The shoes are not high heels, platforms, or steel-toed.
</form>

Answer 3

您的JavaScript包含显示相应div的代码。它不包含用于隐藏先前显示的内容的代码。

您可以看到以下问题的答案，以获得一个想法。

How to hide and show content based on drop down selection

复选框选项未被隐藏

3 个答案: