Solved

Subset

Posted on 2013-12-04
4
253 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTTPS for signup & login - HTTP for all other pages 10 86
Print a <div></div> only 5 55
calculate days away 11 61
Wordpress contact form sending spam 2 53
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

752 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