Select box with checkboxes

Posted on 2006-11-18
Last Modified: 2008-02-01
Wonder if you guys can help me?

I want a dropdown box (easy), BUT, I want the content of the drop down box to be a series of checkboxes. I know it can be done in pure XHTML, but a combination of HTML/Javascript/DOM should work ... I think?

Also note, that when the user clicks on the dropdown list, the z-indez of that IFRAME or layer (what ever you use) must be on top of any other control. And, when a user checks on any of the control, and clicks anywhere on the body of the HTML form, the select box should have the values of the checkbox. And when the user clicks on the select box it should check the values the user has checked.

Hope I've made sense?

I know it sounds compliciated, I sure cant do it. Please let me know if its possible?
Question by:mousemat24
  • 4
  • 3
  • 2
LVL 51

Expert Comment

ID: 17972029
not possible 'cause the option tag my not contain any other tags, just #PCDATA

Author Comment

ID: 17972208
How about something that "looks" like a select box, but when you click on it, it opens up as a "like" a select box with checkboxs?
LVL 51

Expert Comment

ID: 17972246
well you can write a javascript function which is called when you select something from your pulldown, and then creates a checkbox in the DOM which itself shows your pulldown again with onmouseover event.
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

LVL 51

Expert Comment

ID: 17972271
or use something like:

  <input type=checkbox ... id="check1" style="display:none" />
  <select name=pulldown >

where you set the chekbox to display:visible ifyou have selected it.

Author Comment

ID: 17972377

|                  |V|
|                      |
| [X]  test         |
| [X]  testing     |
| [X]  paper      |
| [  ]  pen         |
| [  ]  color       |

The bove is the kind of thing I want, a so called list box with check boxes
LVL 51

Expert Comment

ID: 17972517
As I said: not possible with option tag. Dot. Period.
Did you try my suggestion with the invisible checkbox, which gets displayedon change?

something like:
  <select name=pulldown onchange="document.getElementById('check1').style.display='visible'">

Note that you need to hide all others, and hilight only the one depending on your selection.

Accepted Solution

iscode earned 500 total points
ID: 17976255
can this be an option for you :)

Author Comment

ID: 17990789
Thanks iscode

Thats kinda what I was looking for.

Expert Comment

ID: 18004418
Your welcome mousemat24

Glad I could help

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Make Session back to empty 9 30
function parameter and using that as array 15 23
jQuery on Submit 4 41 open new page without popup blocker 8 18
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question