[RESOLVED] Hiding the selection list of a select object

@axiom82Aug 06.2008

Is there a way to hide the selection list of a select object?

I want the onclick event of this select object to hide the selection list that normally appears during a select object onclick. Additionally, the onclick event should show a div object containing options that are selectable via checkboxes. This way, I have what my users will believe is a custom select object which includes checkboxes for menu options.

Once the div object that contains the checkbox options is closed, the real select object’s value will be updated with the count of however many options have been checked from the div.

I have attached an image that describes what I’m trying to accomplish.

What is the best way to accomplish this custom select object to allow for check boxes?

~~[upl-file uuid=84c918ce-35bd-4179-a876-0f7054c847c6 size=91kB]~~employee_advanced.jpg[/upl-file]

to post a comment

JavaScript

@JMRKERAug 07.2008 — #You might consider modifying the script from: http://javascript.internet.com/forms/multi-value-drop-down-list.html

Substitute checkbox information for the text box entries.

You can also substitute radio button choices for the text box entries

or even additional links to display after the initial selection.

If that doesn't suit your needs, look at 'Tabbed Menus'

in the JavaScript Source website.

Maybe: http://javascript.internet.com/navigation/giltab.html

or: http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

@scragarAug 07.2008 — #erm try something more like:

[code=php]...
 <head>
 ...
 <style type='text/css'>
 #dropParent div{
 display: none;
 position: absolute;
 }
 </style>
 <script type='text/javascript'>
 function toggleDrop(){
 var x = this.parentNode.getElementsByTagName('div')[0].style;
 x.display = (x.display == 'block')?'none':'block';
 
 if(arguments[0] && arguments[0].preventDefault){
 arguments[0].preventDefault();
 };
 this.blur();
 return false;
 };
 
 function addEvent(obj, evType, fn){
 if (obj.addEventListener){// safari, firefox, konqueror, icab, opera, kazekaze, amaya etc.
 obj.addEventListener(evType, fn, false);
 return true;
 }else if(obj.attachEvent){
 var r = obj.attachEvent("on"+evType, fn);// IE
 return r;
 }else{
 return false;
 };
 };
 
 window.onload = function(){
 var x = document.getElementById('dropParent');
 x = x.getElementsByTagName('select')[0];
 addEvent(x, 'click', toggleDrop);
 };
 </script>
 
 ...
 
 </head>
 <body>
 ...
 
 <div id='dropParent'><select><option>Menu</option></select>
 <div><input type='checkbox'>a<br>
 <input type='checkbox'>a<br>
 <input type='checkbox'>b<br>
 <input type='checkbox'>c<br>
 <input type='checkbox'>d<br>
 <input type='checkbox'>e<br>
 <input type='checkbox'>f<br>
 </div></div>
 
 ...
 
 </body>
 ...
 [/code]

EDITED: fixed a minor error in some browsers

@axiom82authorAug 07.2008 — #That's awesome, thanks ?

[RESOLVED] Hiding the selection list of a select object

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Hiding the selection list of a select object

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴