Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Subset

Posted on 2013-12-04
4
Medium Priority
?
266 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 1500 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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

877 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