How to Hide the Options in select

[Nageshwarrao]

Hi Every one,

My Problem is, I want to hide the options in drop down.

As an example, I have code as

    
                         <SELECT>
                                        <OPTION>NAME</OPTION>
                                        <OPTION>REG.NO</OPTION>
                                        <OPTION>STATE</OPTION>
                        </SELECT>

In this i want hide option REG.NO. How to do it.I will be very thankfull to every one .

[AricC]

What do you mean you want to hid the option? Do you want to disable it or make the one select option disabled?

[ronverdonk]

The easiest way to hide an option in a drop down list is not to show it at all. That is the purpose of a drop down? To let a user select. If you don't want him/her to select, dont't show it.

Ronald :cool:

[AricC]

What you should do is have an option above like a radio button then depending on what they pick the drop down will load with only the values dependent on the radio buttons.

HTH,
Aric

[Nageshwarrao]

What do you mean you want to hid the option? Do you want to disable it or make the one select option disabled?

I want to disable one select option.

[Decebal]

I have the same problem. I found a solution which works excelent in Firefox but not in IE. :(

This works in Firefox:

if(hyde == 1)
  document.FormName.SelectName.options[2].style.display = 'none';
else
  document.FormName.SelectName.options[2].style.display = 'block';

Does anybody know how to make it work in IE ???

---

[The Inologist]

I also am having the same problem. The following works in Firefox but not IE.

<SELECT>
<OPTION>NAME</OPTION>
<OPTION style="display:none;">REG.NO</OPTION>
<OPTION>STATE</OPTION>
</SELECT>

Did any one have any success in hiding options in Internet Explorer?

Regards,

John

[acoder]

To hide options in IE, you'll need to remove the options completely.

[firstposter]

I have a similar problem i'm trying to solve

I doubt if its possible but could you somehow use javascript to add/remove html comments to the option tags that are not needed. (I wish we could use css display:none!!)

eg

<select>
      <option>value1</option>
<!-- <option>value2</option> -->
      <option>value3</option>
      <option>value4</option> 
</select>

I'm trying to create second dependent dropdown list

eg dropdown 1 is a list of say countries. dropdown 2 is for cites.

Im using php to to generate the first and second dropdown.

The second dropdown has all possible options for for each option in the first dropdown. This means that if javascript is disabled all options would be listed in the second dropdown. if javascript is enabled the second dropdown list is shortened. It would show/hide options in the second dropdown each time the first dropdown list changes

i hope that all makes sense - can anyone help

[gits]

so to understand you correctly .... both of the lists are basicly populated already on the page?

[firstposter]

yep that's right



---------------------

[gits]

then it is quite simple in theory ... :) ... just use the 'primary' select's onchange-event to call a function that maps the current selection to the needed values in your 'secondary' select. it would be of great help when the values correspond in any way to the selected one may be the options could have a custom attribute set or use the class-attribute to preserve valid html ... then use that map to populate a new select and display it while hiding the 'not needed' secondary list ... you could use the cloneNode() method to clone the options for the 'display-list' or just create new ones ... how much javascript-knowledge do you have? could you start with that suggestions?

[firstposter]

My javascript knowledge is rather basic. I've just plowed though a few javascript references in the last week and just started creating my first scripts this weekend.

To provide more info here is a bit more of an example to what i posted earlier

(ps. I've used countries and cites as a substitute for what my actual dropdowns are for my app)

DROPDOWN 1:

<select name="countries" id="countries">
<option value="1">Australia</option>
<option value="2">England</option>
<option value="3">Germany</option>
<option value="4">USA</option>
</select>

For dropdowns 1 and 2 the 'value' attribute relates to the primary key in the database for that country

For dropdown 2 the 'name' attribute relates to the corresponding countryID from dropdown 1

DROPDOWN 2:

<select name="cities" id="cities">
<option name="1" value="1">Brisbane</option>
<option name="1" value="2">Melbourne</option>
<option name="1" value="3">Sydney</option>
<option name="2" value="4">Liverpool</option>
<option name="2" value="5">London</option>
<option name="2" value="6">Manchester</option>
<option name="3" value="7">Berlin</option>
<option name="3" value="8">Hamburg</option>
<option name="3" value="9">Munich</option>
<option name="4" value="10">Chicago</option>
<option name="4" value="11">Los Angeles</option>
<option name="4" value="12">New York</option>
</select>

i think you've sparked an idea for me to be able to solve the problem ive got or maybe its actually what your saying.

I'm thinking that when the page loads a class is applied to dropdown 2 giving it a display of none hiding it from the user. When an option from dropdown 1 is selected a function would create a new 'third' <select></select> dropdown and fill it with <options></options>s. I presume we'd use cloneNode() to copy the required options from dropdown 2 and insert them in to the newly crated dorpdown 3.

When the user selects a new option in dropdown 1 the function would run again and rewrite the options in dropdown 3.

if you think this is a workable solution I'll focus my efforts on this model. my only concern is that a I have at least 600 <options></options> in dropdown 2. do you think that there might be any performance issues. one country has say 400 cites, the rest say 100, 50, 20, 20, 10.


ps. is it out of the question to add and then remove the <!-- --> html comments using javascript to the the <option></option> tags in dropdown 2 as i mentioned earlier on.


thanks for your help on this.

[gits]

you got the idea quite well :) ...

performance shouldn't be an issue here ... we have some widgets that handle thousands of records at the client ...

you might even try to create comment-nodes and add/remove options to it ... i would never do it that way just by not finding that very nice :) ... you would have to rearrange the nodes often and just using a new list would avoid the fiddling with add and remove operations ... i think it could be simpler to just use the third list ...

kind regards

[firstposter]

SOLVED: For future googlers who are racking their brain for a solution(as i was) here's the code....

function createDynamicDropdown(dropDown1, dropDown2, dropDown3) {

/* 	dropdown1 = lists all the countries 
	dropdown2 = this drop down is not used by users. Think of it as just a struture that holds ALL the cities for ALL countries from dropdown1. 
	dropdown3 = is a dynamically generated dropdown list which changes based on what is selected in dropdown1. the <option> nodes are copied out from dropdown2 and dynamically rendered in dropdown3.
*/
		
		var dropDown1 = document.getElementById(dropDown1);
		var dropDown2 = document.getElementById(dropDown2);
		var dropDown3 = document.getElementById(dropDown3);
		var allDropDown2Elements = dropDown2.childNodes; // 'childNodes' used so you can also include <optgroup label="xxxxxxx" name="xxx"/> in dropDown2 if required
 

		// remove all <option>s in dropDown3
		while (dropDown3.hasChildNodes()){
			dropDown3.removeChild(dropDown3.firstChild);
		}  
		 				 
		// loop though and insert into dropDown3 all of the city <option>s in dropdown2 that relate to the country value selected in dropdown1
		for(var i = 0; i < allDropDown2Elements.length; i++){
		 
				if (allDropDown2Elements[i].nodeType == 1 && allDropDown2Elements[i].getAttribute("name") == dropDown1.value) {
				 
					newDropDown3Element = allDropDown2Elements[i].cloneNode(true);
					dropDown3.appendChild(newDropDown3Element);
				}	
				
		} // END - for loop
		
		// if '-- Country --' is selected insert the 'default' node into dropDown3 
		if(dropDown1.value == 0) {
 	 		dropDown3.options[0] = new Option("Please select a country first", "0")
		}
		
		// (if you have server side logic that adds selected="selected" in dropdown2) extra code for IE to display the correct 'slected="selected"' value in the select box dropdown3
		if (navigator.userAgent.indexOf('MSIE') !=-1){
			 
			for (var i=0; i < dropDown3.length; i++) {
				if(dropDown3[i].value == dropDown2.value) {
					dropDown3[i].selected = true;
				}
			}
			 
		}
		
	
}

**** html ******

<body onload="createDynamicDropdown('dropDown1', 'dropDown2', 'dropDown3');">


<select id="dropDown1" name="dropDown1" onchange="createDynamicLineRouteDropdown('dropDown1', 'dropDown2', 'dropDown3');">
<option value="0">-- Country --</option>
<option value="1">Australia</option>
<option value="2">England</option>
<option value="3">Germany</option>
<option value="4">USA</option>
</select>


<select id="dropDown2" name="dropDown2" style="display:none;">
<option name="1" value="1">Brisbane</option>
<option name="1" value="2">Melbourne</option>
<option name="1" value="3">Sydney</option>
<option name="2" value="4">Liverpool</option>
<option name="2" value="5">London</option>
<option name="2" value="6">Manchester</option>
<option name="3" value="7" selected="selected">Berlin</option>
<option name="3" value="8">Hamburg</option>
<option name="3" value="9">Munich</option>
<option name="4" value="10">Chicago</option>
<option name="4" value="11">Los Angeles</option>
<option name="4" value="12">New York</option>
</select>



<select id="dropDown3" name="dropDown3">
<option>Loading...</option>
</select>

</body>