473,325 Members | 2,342 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,325 software developers and data experts.

How to Hide the Options in select

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
15 92210
AricC
1,892 Expert 1GB
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
4,258 Expert 4TB
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
AricC
1,892 Expert 1GB
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
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
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
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
16,027 Expert Mod 8TB
To hide options in IE, you'll need to remove the options completely.
Jul 12 '08 #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
5,390 Expert Mod 4TB
so to understand you correctly .... both of the lists are basicly populated already on the page?
Aug 30 '09 #10
yep that's right



---------------------
Aug 30 '09 #11
gits
5,390 Expert Mod 4TB
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
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
5,390 Expert Mod 4TB
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
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
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

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

Similar topics

5
by: Jared | last post by:
Hi there I am trying to do the following with no luck: I want to have a form with two select menus. Each menu will obvisouly have different options, each with its own value. Then quite simply,...
2
by: Wim Roffal | last post by:
I want to insert an option into a select. I know you can do something like: - Myselect.options = new Option('Hello 3'); but that doesn't do what I want because it overwrites an existing option....
1
by: comp.lang.javascript | last post by:
Using IE5.5+, is it possible to hide options in a select? The following doesn't work: <HTML> <HEAD> <STYLE> SELECT OPTION.orgA{ display:none } .orgB{ display:inline } .orgC{ display:none }
2
by: Joachim Bauer | last post by:
I'm using the code below to display a menu that opens when the mouse goes over the main menu item (try it in your browser to understand the behaviour). It uses "position:absolute" and a switch...
2
by: Dave Hammond | last post by:
I'm not sure if this is technically a javascript question, but I'm coding in javascript, so I'll try here first. To overlay a section of a page I typically use an absolute positioned <div> and...
2
by: mitch | last post by:
I have a <select> that's inside a <td> and I want to dynamically show and hide the select. If elem is set to the <select> and I do either of these: elem.style.visibility = "hidden";...
6
by: work.Yehuda | last post by:
This script will work only width Firefox browser <select id='object'> </select> document.getElementById(abject).innerHTML= '<option>yehuda' For some reason the Explorer browser doesn't...
4
by: Luqman | last post by:
I have populated the Child Accounts and Parent Accounts in a Grid View Control, I want to hide the Select Column of Parent Accounts, but not the Child Accounts, is it possible ? I am using VS...
3
by: Italio Novuas | last post by:
Hi all, let me begin by saying that I *ALMOST* have this complete! What I'm trying to do is make it so my text area shows the innerHTML of any select item with the same value. For example, if I...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.