How to hide an option in a SELECT tag?

@CalibanJul 07.2004

Hi,
I need to hide/show elements in a SELECT tag.
I don’t want to manage 2+ SELECTs (populating one from another)

I’m trying to do something like this:

function actualizar_lista_platos(){
var lp = document.getElementById(‘COD_PLATO’);
var mnu = document.getElementById(‘COD_MENU’);

Both COD_MENU and COD_PLATO are SELECTs, being COD_PLATO the “son” of COD_MENU (every COD_MENU element has associated 1+ COD_PLATO’s element, so if I choose a COD_MENU element, I need in COD_PLATO to be shown the COD_PLATO’s elements related to the select COD_MENU item)

Finally, I just need to know if there’s any way to show/hide elements in a SELECT tag. That’s it.

Thanx in advance.

to post a comment

JavaScript

5 Comments(s) _↴

@theuedimasterJul 07.2004 — #check out my site in ie, i think this is what you want:

http://www.sigmaseven.net/p4_28_economy.htm

@CalibanauthorJul 08.2004 — #Thanks,

but this is not what I need (you replace the text in the option by '----')

I need the option to hide/show in one step

I would do it like this:

1) Store all the child-SELECT values in a table

2) When the parent-SELECT changes, delete all the options in the child-SELECT, and then populate the child-SELECT with the table values that match the parent-SELECT's criteria.

But I think that could exist another way to hide/show, without having 2+ extra storing tags nor deleting/populating the child-SELECT options

Thanx in advance.

@ziffgoneJul 08.2004 — #Is this by chance what you're after?

<html>

<head>

<style>

.show{display:inline;}

.hide{display:none;}

</style>

<script>

function ShowAdditional(){

if(document.getElementById('one').selected){

document.getElementById('select2').disabled=false;

document.getElementById('select2').className="show";

document.getElementById('select3').className="hide";

document.getElementById('select4').className="hide";

return true;

}

else if(document.getElementById('two').selected){

document.getElementById('select2').className="hide";

document.getElementById('select4').className="hide";

document.getElementById('select3').className="show";

return true;

}

else if(document.getElementById('three').selected){

document.getElementById('select2').className="hide";

document.getElementById('select3').className="hide";

document.getElementById('select4').className="show";

return true;

}

}

</script>

</head>

<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">

<form name="form1" onsubmit="top.location=self.location.href;return false">

<select name="select1" onchange="ShowAdditional();" class="show">

<option id="select_one">Select One</option>

<option id="one">One</option>

<option id="Two">Two</option>

<option id="Three">Three</option>

</select><br>

<select name="select2" class="show" DISABLED>

<option>Select Again</option>

<option id="one">Four</option>

<option id="Two">Five</option>

<option id="Three">Six</option>

</select>

<select name="select3" class="hide">

<option>Select Again</option>

<option id="one">Seven</option>

<option id="Two">Eight</option>

<option id="Three">Nine</option>

</select>

<select name="select4" class="hide">

<option id="select_one">Select Again</option>

<option id="one">Ten</option>

<option id="Two">Eleven</option>

<option id="Three">Twelve</option>

</select><br><br><br>

<input type="submit" value=" Try Again ">

</form>

</body>

</html>

@CalibanauthorJul 10.2004 — #This piece of code helped me. It connects the contents of two comboboxes. It works for me. So I think you could need it someday.

Best regards.

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

// Initialize class for Type and Style

function Type(id, type){

this.id = id;

this.type = type;

}

function Style(id, id_type, style){
   this.id = id;
   this.id_type = id_type;
   this.style = style;
  }

// Initialize Array's Data for Type and Style

TypeArray = new Array(

new Type(1, "Apparel"),

new Type(2, "Shoes"),

new Type(5, "Accessories")

);

StyleArray = new Array(
   new Style(4, 1, "Apparel_1"),
   new Style(7, 1, "Apparel_2"),
   new Style(41, 2, "Shoes_3"),
   new Style(21, 2, "Shoes_4"),
   new Style(17, 2, "Shoes_2"),
   new Style(30, 5, "Accessories_3"),
   new Style(27, 5, "Accessories_4"),
   new Style(31, 5, "Accessories_3")
  );
 
 
  function init(sel_type, sel_style){
   document.product.id_type.options[0]	= new Option("[ Type ]");
   document.product.id_style.options[0] = new Option("[ Style ]");
   for(i = 1; i <= TypeArray.length; i++){
   document.product.id_type.options[i]	= new Option(TypeArray[i-1].type, TypeArray[i-1].id);
   if(TypeArray[i-1].id == sel_type)
   document.product.id_type.options[i].selected = true;
   }
 
   OnChange(sel_style);
  }
 
 
  function OnChange(sel_style){
   sel_type_index = document.product.id_type.selectedIndex;
   sel_type_value = parseInt(document.product.id_type[sel_type_index].value);
   for(i = document.product.id_style.length - 1; i > 0; i--)
   document.product.id_style.options[i]	= null;
   j=1;
   for(i = 1; i <= StyleArray.length; i++){
   if(StyleArray[i-1].id_type == sel_type_value){
   document.product.id_style.options[j]	= new Option(StyleArray[i-1].style, StyleArray[i-1].id);
   if(StyleArray[i-1].id == sel_style)	document.product.id_style.options[j].selected = true;
   j++;
   }
   }
 
  }

</SCRIPT>

</HEAD>

<form name="product">

<select name="id_type" size="1" style="width: 150px;" onChange="OnChange()">

</select>

<select name="id_style" size="1" style="width: 150px;">

</select>

</form>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

init(); // Default initialize comboboxes for Type and Style

</SCRIPT>

<BODY>

</BODY>

</HTML>

@D_XApr 16.2010 — #Here it is my version of the above nice piece of code:

CHANGES:
1. send the combobox elements as arguments in the functions calls, its easier to reuse.

2. By default, all the elements in second combobox are available.[/QUOTE]

[CODE]<HTML>
 <HEAD>
 <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
 
 // Initialize Array's Data for Type and Style
 SelectTypeArray = new Array(
 new SelectType(1, "Apparel"),
 new SelectType(2, "Shoes"),
 new SelectType(5, "Accessories")
 );
 
 SelectStyleArray = new Array(
 new SelectStyle(4, 1, "Apparel_1"),
 new SelectStyle(7, 1, "Apparel_2"),
 new SelectStyle(41, 2, "Shoes_3"),
 new SelectStyle(21, 2, "Shoes_4"),
 new SelectStyle(17, 2, "Shoes_2"),
 new SelectStyle(30, 5, "Accessories_3"),
 new SelectStyle(27, 5, "Accessories_4"),
 new SelectStyle(31, 5, "Accessories_3")
 );
 
 // Initialize class for Type and Style
 function SelectType(id, type) {this.id = id;	this.type = type;}
 function SelectStyle(id, id_type, style) {this.id = id; this.id_type = id_type; this.style = style;}
 function init(sel_type, sel_style, sel1, sel2) {
 sel1.options[0] = new Option("Escolha...");
 sel2.options[0] = new Option("Escolha...");
 for(i = 1; i <= SelectTypeArray.length; i++){
 sel1.options[i] = new Option(SelectTypeArray[i-1].type, SelectTypeArray[i-1].id);
 if(SelectTypeArray[i-1].id == sel_type)
 sel1.options[i].selected = true;
 }
 SelectOnChange(sel_style, sel1, sel2);
 }
 function SelectOnChange(sel_style, sel1, sel2) {
 
  sel_type_index = sel1.selectedIndex;
  sel_type_value = parseInt(sel1[sel_type_index].value);
  for(i = sel2.length - 1; i > 0; i--)
   sel2.options[i] = null;
  j=1;
  for(i = 1; i <= SelectStyleArray.length; i++){
   if(SelectStyleArray[i-1].id_type == sel_type_value || sel_type_index==0){
   sel2.options[j] = new Option(SelectStyleArray[i-1].style, SelectStyleArray[i-1].id);
   if(SelectStyleArray[i-1].id == sel_style) sel2.options[j].selected = true;
   j++;
   }
  }
 }
 
 </SCRIPT>
 </HEAD>
 
 <form name="product">
 <select name="id_type" id="id_type" size="1" style="width: 150px;" onChange="SelectOnChange(0, document.product.id_type, document.product.id_style)">
 </select>
 
 <select name="id_style" id="id_style" size="1" style="width: 150px;">
 </select>
 </form>
 
 <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
 init(0, 0, document.product.id_type, document.product.id_style); // Default initialize comboboxes for Type and Style
 </SCRIPT>
 
 <BODY>
 </BODY>
 </HTML>[/CODE]

Also in #JavaScript _↴

detect running programs Drop Lists show error if incorrect value is entered in textbox

Success!

Help @Caliban spread the word by sharing this article on Twitter...

Tweet This

How to hide an option in a SELECT tag?

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to hide an option in a SELECT tag?

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴