Solved

Subset

Posted on 2013-12-04
4
250 Views
Last Modified: 2013-12-10
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.
0
Comment
Question by:TCHGirl
  • 2
4 Comments
 
LVL 25

Expert Comment

by:dgrafx
ID: 39698003
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39698027
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
 

Author Comment

by:TCHGirl
ID: 39706587
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39707559
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

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question