Hide/Show Drop down list when another drop down list is selected.

[lahddah]

Hi. I found this code and it seems to work...almost. I have a page that has two different drop down list trip selections and, based on the selection, another drop down list will come up with a list of dates for the selected trip. There are (at least) two problems -
1. When I select something from the first drop down list then select something from the second drop down list, the two layers override each other (the first hidden layer shows, but doesn't go away when something in the second drop down box is chosen). The way I would like it to work is that only one of the drop down trip selections should be chosen. If something is selected in the first drop down, then if the user selects something in the secone one, I would like to 'clear' the first one. And vice versa.

2. The hide/show function is not working in netscape.

Here is a link to play with:

http://www.lahddah.com/test/hide_show.htm

Here's the code (I think it's long and bulky, so if there's a simpler way to do this, please feel free to share!)
-------------------------

function whatTripSelected(){

var selectValDom = document.forms['trip_table'].elements['tripDom'].options;
var selectValInt = document.forms['trip_table'].elements['tripInt'].options;
if (selectValDom.value == 'Salmon River Whitewater Adventure') {
document.getElementById('salmon_table').style.visibility='visible';
//document.getElementById('chpaytype_table').style.visibility='hidden';
}else{
document.getElementById('salmon_table').style.visibility='hidden';
}
if (selectValDom.value == 'Snake River Whitewater Adventure') {
document.getElementById('snake_table').style.visibility='visible';
//document.getElementById('chpaytype_table').style.visibility='visible';
}else{
document.getElementById('snake_table').style.visibility='hidden';
}
if (selectValDom.value == 'Owyhee River Whitewater Expedition') {
document.getElementById('owyhee_table').style.visibility='visible';
//document.getElementById('chpaytype_table').style.visibility='visible';
}else{
document.getElementById('owyhee_table').style.visibility='hidden';
}
if (selectValDom.value == 'Weekend Rafting Getaway') {
document.getElementById('weekend_table').style.visibility='visible';
//document.getElementById('chpaytype_table').style.visibility='visible';
}else{
document.getElementById('weekend_table').style.visibility='hidden';
}
if (selectValDom.value == 'Multi-Sport Adventures in Idaho') {
document.getElementById('multi_table').style.visibility='visible';
//document.getElementById('chpaytype_table').style.visibility='visible';
}else{
document.getElementById('multi_table').style.visibility='hidden';
}
if (selectValDom.value == 'Steelhead Fishing Adventure') {
document.getElementById('steel_table').style.visibility='visible';
//document.getElementById('chpaytype_table').style.visibility='visible';
}else{
document.getElementById('steel_table').style.visibility='hidden';
}
if (selectValDom.value == 'Exploring the Outdoors of Idaho') {
document.getElementById('explore_table').style.visibility='visible';
//document.getElementById('chpaytype_table').style.visibility='visible';
}else{
document.getElementById('explore_table').style.visibility='hidden';
}
if (selectValInt.value == 'Adventures in Costa Rica') {
document.getElementById('costa_table').style.visibility='visible';
//document.getElementById('chpaytype_table').style.visibility='visible';
}else{
document.getElementById('costa_table').style.visibility='hidden';
}
if (selectValInt.value == 'Sea Kayaking in Baja') {
document.getElementById('baja_table').style.visibility='visible';
//document.getElementById('chpaytype_table').style.visibility='visible';
}else{
document.getElementById('baja_table').style.visibility='hidden';
}
if (selectValInt.value == 'Multi-Sport Adventures in Baja') {
document.getElementById('multi2_table').style.visibility='visible';
//document.getElementById('chpaytype_table').style.visibility='visible';
}else{
document.getElementById('multi2_table').style.visibility='hidden';
}
if (selectValInt.value == 'Galapagos Islands Wildlife Cruise') {
document.getElementById('galapagos_table').style.visibility='visible';
//document.getElementById('chpaytype_table').style.visibility='visible';
}else{
document.getElementById('galapagos_table').style.visibility='hidden';
}
}

-------------------
Thanks, in advance!!

~ lahddah

 

[lahddah]

Wow...this is the first time in all the times I've posted here that I've not gotten a response. Hmmm....can anyone tell me how to make this script work in netscape? I know there are little scripts out there that check browser types, but am not sure which one(s) to use.

Thanks!


~ lahddah

 

[theboyhope]

Looks like you should be using if (selectValDom[ selectValDom.selectedIndex].value == 'Salmon River Whitewater Adventure' instead of just if (selectValDom.value == 'Salmon River Whitewater Adventure') { and so on for the rest of your script.

As for shortening it, you might want to consider building a function for the parts of the code you're repeating over and over again.

 

[lahddah]

Thanks for your response, boyhope. I tried doing that and nothing changed. Looked the same in IE and still didn't do it's deed for NS.

hmm.....


~ lahddah

 

[theboyhope]

Bizarre-o. I had a test page working and everything. I'll have another look ...

 

[theboyhope]

Ah, I've just re-read your first post and realised that I was only paying any attention to fault #2 (hide/show not working in Netscape).

 

[theboyhope]

<cringe>You're not talking about Netscape 4 are you?</cringe>

Eh, anyways, here's a short example that you could apply to your bigger situation. (Unless you *are* talking about NS4 in which case I hope somebody else can help you out. I never use it.)

<script type="text/javascript">

	var domValues = new Array( "Salmon River", "Snake River" );
	var domTables = new Array( "salmon_table", "snake_table" );

	var intValues = new Array( "Baja", "Galapagos" );
	var intTables = new Array( "baja_table", "galapagos_table" );


	function selectedTrip( el ){

		var chosen = el.options[ el.options.selectedIndex ].value;

		if ( el.id == "dom" ) {

			hideTables( intTables );

			for ( var i=0; i < domValues.length; i++ ) {

				if ( chosen == domValues[ i ] )
					document.getElementById( domTables[ i ] ).style.display = "block";
				else
					document.getElementById( domTables[ i ] ).style.display = "none";
			}
		}

		if ( el.id == "int" ) {

			hideTables( domTables );

			for ( var i=0; i < intValues.length; i++ ) {

				if ( chosen == intValues[ i ] )
					document.getElementById( intTables[ i ] ).style.display = "block";
				else
					document.getElementById( intTables[ i ] ).style.display = "none";
			}
		}
	}


	function hideTables( arr ) {

		for ( var i=0; i < arr.length; i++ ) {
			document.getElementById( arr[ i ] ).style.display = "none";
		}
	}


</script>
<form>

<select id="dom" onchange="selectedTrip( this );">
  <option>Select Domestic ...</option>
  <option value="Salmon River">Salmon River</option>
  <option value="Snake River">Snake River</option>
  </optgroup>
</select>

<select id="int" onchange="selectedTrip( this );">
  <option>Select International ...</option>
  <option value="Baja">Baja</option>
  <option value="Galapagos">Galapagos Islands</option>
</select>

</form>

<div id="salmon_table" style="display: none;">salmon_table</div>
<div id="snake_table" style="display: none;">snake_table</div>
<div id="baja_table" style="display: none;">baja_table</div>
<div id="galapagos_table" style="display: none;">galapagos_table</div>

HTH.

 

[lahddah]

Ah....that's pretty! Thank you SO much! Looks like it works in NS 7 ( phewy to NS4!).

I have yet another question, this form uses CGI to send the information to the user. We usually set the responses up by putting the field names in TPLs. However, in this case, I'm not quite sure how to pass the correct trip name, since when one trip is selected from one box, then you go and select something from the other box just for kicks...the first box doesn't clear out. So I'm not sure how to bring the correct selected trip into the TPL. (since they're both populated, the program doesn't distinguish which one is the 'real' trip selection) Make sense?

Thanks, again!


~ lahddah

 

[theboyhope]

Probably easiest to drop the info you need into some hidden form fields and use those, ignoring the rest.