By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,238 Members | 1,661 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,238 IT Pros & Developers. It's quick & easy.

How to Hide the Options in select

P: 8
Hi Every one,

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

As an example, I have code as
Expand|Select|Wrap|Line Numbers
  1.  
  2.                          <SELECT>
  3.                                         <OPTION>NAME</OPTION>
  4.                                         <OPTION>REG.NO</OPTION>
  5.                                         <OPTION>STATE</OPTION>
  6.                         </SELECT>
In this i want hide option REG.NO. How to do it.I will be very thankfull to every one .
Nov 23 '06 #1
Share this Question
Share on Google+
15 Replies


Expert 100+
P: 1,892
What do you mean you want to hid the option? Do you want to disable it or make the one select option disabled?
Nov 25 '06 #2

ronverdonk
Expert 2.5K+
P: 4,258
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:
Nov 25 '06 #3

Expert 100+
P: 1,892
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
Nov 26 '06 #4

P: 8
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.
Nov 27 '06 #5

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

This works in Firefox:
Expand|Select|Wrap|Line Numbers
  1. if(hyde == 1)
  2.   document.FormName.SelectName.options[2].style.display = 'none';
  3. else
  4.   document.FormName.SelectName.options[2].style.display = 'block';
Does anybody know how to make it work in IE ???

---
Dec 7 '06 #6

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

Expand|Select|Wrap|Line Numbers
  1. <SELECT>
  2. <OPTION>NAME</OPTION>
  3. <OPTION style="display:none;">REG.NO</OPTION>
  4. <OPTION>STATE</OPTION>
  5. </SELECT>
Did any one have any success in hiding options in Internet Explorer?

Regards,

John
Jan 4 '07 #7

acoder
Expert Mod 15k+
P: 16,027
To hide options in IE, you'll need to remove the options completely.
Jul 12 '08 #8

P: 8
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

Expand|Select|Wrap|Line Numbers
  1. <select>
  2.       <option>value1</option>
  3. <!-- <option>value2</option> -->
  4.       <option>value3</option>
  5.       <option>value4</option> 
  6. </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
Aug 30 '09 #9

gits
Expert Mod 5K+
P: 5,390
so to understand you correctly .... both of the lists are basicly populated already on the page?
Aug 30 '09 #10

P: 8
yep that's right



---------------------
Aug 30 '09 #11

gits
Expert Mod 5K+
P: 5,390
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?
Aug 30 '09 #12

P: 8
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:
Expand|Select|Wrap|Line Numbers
  1. <select name="countries" id="countries">
  2. <option value="1">Australia</option>
  3. <option value="2">England</option>
  4. <option value="3">Germany</option>
  5. <option value="4">USA</option>
  6. </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:
Expand|Select|Wrap|Line Numbers
  1. <select name="cities" id="cities">
  2. <option name="1" value="1">Brisbane</option>
  3. <option name="1" value="2">Melbourne</option>
  4. <option name="1" value="3">Sydney</option>
  5. <option name="2" value="4">Liverpool</option>
  6. <option name="2" value="5">London</option>
  7. <option name="2" value="6">Manchester</option>
  8. <option name="3" value="7">Berlin</option>
  9. <option name="3" value="8">Hamburg</option>
  10. <option name="3" value="9">Munich</option>
  11. <option name="4" value="10">Chicago</option>
  12. <option name="4" value="11">Los Angeles</option>
  13. <option name="4" value="12">New York</option>
  14. </select>
  15.  
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.
Aug 30 '09 #13

gits
Expert Mod 5K+
P: 5,390
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
Aug 30 '09 #14

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


Expand|Select|Wrap|Line Numbers
  1. function createDynamicDropdown(dropDown1, dropDown2, dropDown3) {
  2.  
  3. /*     dropdown1 = lists all the countries 
  4.     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. 
  5.     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.
  6. */
  7.  
  8.         var dropDown1 = document.getElementById(dropDown1);
  9.         var dropDown2 = document.getElementById(dropDown2);
  10.         var dropDown3 = document.getElementById(dropDown3);
  11.         var allDropDown2Elements = dropDown2.childNodes; // 'childNodes' used so you can also include <optgroup label="xxxxxxx" name="xxx"/> in dropDown2 if required
  12.  
  13.  
  14.         // remove all <option>s in dropDown3
  15.         while (dropDown3.hasChildNodes()){
  16.             dropDown3.removeChild(dropDown3.firstChild);
  17.         }  
  18.  
  19.         // loop though and insert into dropDown3 all of the city <option>s in dropdown2 that relate to the country value selected in dropdown1
  20.         for(var i = 0; i < allDropDown2Elements.length; i++){
  21.  
  22.                 if (allDropDown2Elements[i].nodeType == 1 && allDropDown2Elements[i].getAttribute("name") == dropDown1.value) {
  23.  
  24.                     newDropDown3Element = allDropDown2Elements[i].cloneNode(true);
  25.                     dropDown3.appendChild(newDropDown3Element);
  26.                 }    
  27.  
  28.         } // END - for loop
  29.  
  30.         // if '-- Country --' is selected insert the 'default' node into dropDown3 
  31.         if(dropDown1.value == 0) {
  32.               dropDown3.options[0] = new Option("Please select a country first", "0")
  33.         }
  34.  
  35.         // (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
  36.         if (navigator.userAgent.indexOf('MSIE') !=-1){
  37.  
  38.             for (var i=0; i < dropDown3.length; i++) {
  39.                 if(dropDown3[i].value == dropDown2.value) {
  40.                     dropDown3[i].selected = true;
  41.                 }
  42.             }
  43.  
  44.         }
  45.  
  46.  
  47. }


**** html ******

Expand|Select|Wrap|Line Numbers
  1. <body onload="createDynamicDropdown('dropDown1', 'dropDown2', 'dropDown3');">
  2.  
  3.  
  4. <select id="dropDown1" name="dropDown1" onchange="createDynamicLineRouteDropdown('dropDown1', 'dropDown2', 'dropDown3');">
  5. <option value="0">-- Country --</option>
  6. <option value="1">Australia</option>
  7. <option value="2">England</option>
  8. <option value="3">Germany</option>
  9. <option value="4">USA</option>
  10. </select>
  11.  
  12.  
  13. <select id="dropDown2" name="dropDown2" style="display:none;">
  14. <option name="1" value="1">Brisbane</option>
  15. <option name="1" value="2">Melbourne</option>
  16. <option name="1" value="3">Sydney</option>
  17. <option name="2" value="4">Liverpool</option>
  18. <option name="2" value="5">London</option>
  19. <option name="2" value="6">Manchester</option>
  20. <option name="3" value="7" selected="selected">Berlin</option>
  21. <option name="3" value="8">Hamburg</option>
  22. <option name="3" value="9">Munich</option>
  23. <option name="4" value="10">Chicago</option>
  24. <option name="4" value="11">Los Angeles</option>
  25. <option name="4" value="12">New York</option>
  26. </select>
  27.  
  28.  
  29.  
  30. <select id="dropDown3" name="dropDown3">
  31. <option>Loading...</option>
  32. </select>
  33.  
  34. </body>
Sep 8 '09 #15

P: 3
Great solution :)

Try this:

Expand|Select|Wrap|Line Numbers
  1. <head>
  2.     <script>
  3.         var countriesAndCites = new Array ();
  4.  
  5.         countriesAndCites['Australia'] = ['Brisbane', 'Melbourne', 'Sydney'];
  6.         countriesAndCites['England'] = ['Liverpool', 'London', 'Manchester'];
  7.         countriesAndCites['Germany'] = ['Berlin', 'Hamburg', 'Munich'];
  8.         countriesAndCites['USA'] = ['Chicago', 'Los Angeles', 'New York'];
  9.  
  10.         function ChangeSecondDropContent (select1, select2) { 
  11.  
  12.             var country = select1.options[select1.selectedIndex].text;
  13.             var select2 = document.getElementById (select2);
  14.  
  15.             // removes all options from select 2
  16.             while (select2.options.length) {
  17.                 select2.options.remove (0);
  18.             }
  19.  
  20.             // adds new options to select 2
  21.             var countryArray = countriesAndCites[country];
  22.  
  23.             if (countryArray) {
  24.                 for (var i=0; i < countryArray.length; i++) {
  25.                     var option = new Option (countryArray[i], i);
  26.                     select2.options.add (option);
  27.                 }
  28.             }
  29.         } 
  30.     </script>
  31. </head>
  32. <body>
  33. <body> 
  34.  
  35.     <select id="dropDown1" name="dropDown1" onchange="ChangeSecondDropContent(this, 'dropDown2');"> 
  36.         <option value="0">-- Country --</option> 
  37.         <option value="1">Australia</option> 
  38.         <option value="2">England</option> 
  39.         <option value="3" selected>Germany</option> 
  40.         <option value="4">USA</option> 
  41.     </select> 
  42.  
  43.  
  44.     <select id="dropDown2" name="dropDown2"> 
  45.         <option value="7" selected>Berlin</option> 
  46.         <option value="8">Hamburg</option> 
  47.         <option value="9">Munich</option> 
  48.     </select> 
  49.  
  50. </body> 
  51.  
Use thi links if you want to read more about
add,
remove or
select element,
Sep 10 '09 #16

Post your reply

Sign in to post your reply or Sign up for a free account.