Reputation: 47

Checkbox options not being hidden

hello all: so i'm currently working on a project where the user will select a drop down menu option, which will then open a series of checkboxes. It was working until now, when some of the checkboxes are being shown no matter what, and when I select a drop down option, it won't show anything. This is my code so far:

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

and here's the css and 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>

i realize it's alot, but can anyone offer advice to keep the first set of checkboxes from showing no matter what, and why they won't open? Any help is appreciated!

Upvotes: 0

Answers (3)

YOUNG SANG

Reputation: 11

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

Upvotes: 0

David Thomas

Reputation: 253396

I'd personally suggest:

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.

The above does require a fairly up-to-date browser (but since you're already using document.querySelector(), I take the compatibility as a given), in order to use document.querySelectorAll() and Array.prototype.forEach().

References:

Upvotes: 1

vishnukanth

Reputation: 31

Your JavaScript contains code for showing the corresponding div. It does not contain code for hiding the previously shown content.

You can see the answer for following question to get an idea.

How to hide and show content based on drop down selection

Upvotes: 0

Checkbox options not being hidden

Answers (3)

Related Questions