Solved

Subset

Posted on 2013-12-04
4
240 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 24

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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This video teaches users how to migrate an existing Wordpress website to a new domain.

757 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now