Subset

I have a drop down box called race and in this box is the following

Asian                                                  
Black
Caucasian
Hispanic or Latino-------------------->White
Middle Eastern                                 Black/African American
Nat. American/Nat. Alaskan             Asian
Native Hawaiian                                Etc
Multi-Racial
Pacific Islander

What I would like to do is if somebody selects Hispanic or Latino it then shows another list to select from.

I am not sure if I am saying this correctly so I hope this makes sense.
TCHGirlAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Tom BeckConnect With a Mentor Commented:
Simple, old-school select options and javascript. Example
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
<select id="firstSelect" onChange="showSubset(this)">
	<option value="" disabled selected>Choose a Nationality</option>
	<option value="asianSubset">Asian</option>
    <option value="blackSubset">Black/African American</option>
    <option value="caucSubset">Caucasian</option>
    <option value="hispSubset">Hispanic or Latino</option>
    <option value="midSubset">Middle Eastern</option>
    <option value="natSubset">Nat. American/Nat. Alaskan</option>
    <option value="hawSubset">Native Hawaiian</option>
    <option value="multiSubset">Multi-Racial</option>
    <option value="pacSubset">Pacific Islander</option>
</select>
<select id="asianSubset" style="display:none">
	<option>Asian - item 1</option>
	<option>Asian - item 2</option>
	<option>Asian - item 3</option>
</select>
<select id="blackSubset" style="display:none">
	<option>Black - item 1</option>
	<option>Black - item 2</option>
	<option>Black - item 3</option>
</select>
<select id="caucSubset" style="display:none">
	<option>Cauc - item 1</option>
	<option>Cauc - item 2</option>
	<option>Cauc - item 3</option>
</select>
<select id="hispSubset" style="display:none">
	<option>Hisp - item 1</option>
	<option>Hisp - item 2</option>
	<option>Hisp - item 3</option>
</select>
<select id="midSubset" style="display:none">
	<option>Mid - item 1</option>
	<option>Mid - item 2</option>
	<option>Mid - item 3</option>
</select>
<select id="natSubset" style="display:none">
	<option>Nat - item 1</option>
	<option>Nat - item 2</option>
	<option>Nat - item 3</option>
</select>
<select id="hawSubset" style="display:none">
	<option>Haw - item 1</option>
	<option>Haw - item 2</option>
	<option>Haw - item 3</option>
</select>
<select id="multiSubset" style="display:none">
	<option>Multi - item 1</option>
	<option>Multi - item 2</option>
	<option>Multi - item 3</option>
</select>
<select id="pacSubset" style="display:none">
	<option>Pac - item 1</option>
	<option>Pac - item 2</option>
	<option>Pac - item 3</option>
</select>

<script>
document.getElementById("firstSelect").selectedIndex = 0;

function showSubset(sel) {
	var allSelects = document.getElementsByTagName("select");
	for (var i=1; i<allSelects.length; i++) {
		allSelects[i].style.display = "none";
	}
	var selected = sel.options[sel.selectedIndex].value;
	document.getElementById(selected).style.display = "block";
}
</script>
</body>
</html>

Open in new window

0
 
TCHGirlAuthor Commented:
Here is the code that I use:

<td class="box">
      Race:<br><select name="race">
      <option value=""></option>                        
<option value="Asian" <%if rs.state <> 0 and not rs.eof and race = "Asian" then response.write "selected" end if%>>Asian</option>

<option value="Black" <%if rs.state <> 0 and not rs.eof and race = "Black" then response.write "selected" end if%>>Black</option>

<option value="Caucasian" <%if rs.state <> 0 and not rs.eof and race= "Caucasian" then response.write "selected" end if%>>Caucasian</option>

<option value="Hispanic or Latino" <%if rs.state <> 0 and not rs.eof and race = "Hispanic or Latino" then response.write "selected" end if%>>Hispanic or Latino</option>                                                                  
<option value="Unknown" <%if rs.state <> 0 and not rs.eof and race = "Unknown" then response.write "selected" end if%>>Unknown</option>                                                
</select>
</td>

So would I still use the above it my code looks like this?  Or how would I change it?
0
 
Tom BeckCommented:
Not sure which suggestion you are responding to.

You can use my javascript suggestion with that markup. The critical thing in making my sample code work is to make sure the id of the subset drop down matches the option's value in the first drop down.

Example: If you have a option in the first drop down with value="Black" then the subset drop down will be <select id="Black" style="display:none">
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.