select list dropdown....

[dreamclutch]

When someone selecs 'Pets' from the main select list below I want the 'petages' select list to appear dynamically and replace the 'ages' select list. I've been having trouble with the coding. Thanks...



//main select list


<select name="whatareyou" id="whatareyou">
<option selected="selected" value="A">Select One...</option>
<option value="1">Males</option>
<option value="2">Females</option>
<option value="3">Pets</option>
<option value="4">Bands</option>
</select>




//select list 1

<select name="ages" id="whatareyou">
<option selected="selected" value="0">[Any Age]</option>
<option value="18-25">18-25</option>
<option value="25-30">25-30</option>
<option value="30-35">30-35</option>
<option value="35-40">35-40</option>
<option value="40-45">40-45</option>
<option value="45-50">45-50</option>
<option value="50-55">50-55</option>
<option value="55-60">55-60</option>
<option value="60-65">60-65</option>
<option value="65-70">65-70</option>
<option value="70-75">70-75</option>
<option value="75-80">75-80</option>
<option value="80-85">80-85</option>
<option value="85-90">85-90</option>
<option value="90-95">90-95</option>
</select>



//select list 2


<select name="petages" id="whatareyou">
<option selected="selected" value="0">[Any Age]</option>
<option value="1-5">1-5</option>
<option value="5-10">5-10</option>
<option value="10-15">10-15</option>
<option value="15-20">15-20</option>
<option value="20-25">20-25</option>
<option value="25-30">25-30</option>
<option value="35-40">35-40</option>
<option value="40-45">40-45</option>
<option value="45-50">45-50</option>
</select>

 

[cLFlaVA]

1) any element with an ID needs for that ID to be unique. you have three elements with the "whatareyou" id. this is not valid html.

2) simply use the document.getElementById() method to find the appropriate element, then set the display property to either "none" or "".

document.getElementById("blah").display = "";
[code]document.getElementById("blah").display = "none";

3) i'd probably put this functionality within a function, and call the function from the first select box's onchange event. you'd test for the value, then see #2 above to hide/show the relevant select box.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[trollacious]

You have the same ID for several <select> elements, but if you follow this code, you should be able to accomplish what you want:

<script language="javascript" type="text/javascript">
function displayselect(oneselect)
{
var ages = document.getElementById('ages');
var petages = document.getElementById('petages');

switch (oneselect[oneselect.selectedIndex].value)
  {
  case '1':
  case '2':
    {
    ages.style.display='block';
    petages.style.display='none';
    break;
    }
  case '3':
    {
    ages.style.display='none';
    petages.style.display='block';
    break;
    }
  }
}
</script><select name="whatareyou" id="whatareyou" onchange="displayselect(this);">
    <option selected="selected" value="A">Select One...</option>
    <option value="1">Males</option>
    <option value="2">Females</option>
    <option value="3">Pets</option>
    <option value="4">Bands</option>
</select>

<select name="ages" id="ages">
    <option selected="selected" value="0">[Any Age]</option>
    <option value="18-25">18-25</option>
    <option value="25-30">25-30</option>
    <option value="30-35">30-35</option>
    <option value="35-40">35-40</option>
    <option value="40-45">40-45</option>
    <option value="45-50">45-50</option>
    <option value="50-55">50-55</option>
    <option value="55-60">55-60</option>
    <option value="60-65">60-65</option>
    <option value="65-70">65-70</option>
    <option value="70-75">70-75</option>
    <option value="75-80">75-80</option>
    <option value="80-85">80-85</option>
    <option value="85-90">85-90</option>
    <option value="90-95">90-95</option>
</select>

<select name="petages" id="petages" style="display:none;">
    <option selected="selected" value="0">[Any Pet Age]</option>
    <option value="1-5">1-5</option>
    <option value="5-10">5-10</option>
    <option value="10-15">10-15</option>
    <option value="15-20">15-20</option>
    <option value="20-25">20-25</option>
    <option value="25-30">25-30</option>
    <option value="35-40">35-40</option>
    <option value="40-45">40-45</option>
    <option value="45-50">45-50</option>
    </select>
</form>

You can add to the code to handle other choices you come up with later.

Lee

 

[trollacious]

Beat me again, Cory!

Lee

 

[cLFlaVA]

yeah, yours is clearly more robust though...



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[trollacious]

Mine is just the code for your explanation.

Lee

 

[dreamclutch]

This switch statement is working fine. One small appearance issue I'm dealing with though. After selecting pet from the select menu I get the appropriate ages however it breaks the form field down by 1 line. Is there anyway to eliminate the line break?

- Justin

 

[cLFlaVA]

change "block" to either "" or "inline".



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]