Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

n level Combo Box

Posted on 2004-11-10
4
Medium Priority
?
513 Views
Last Modified: 2006-11-17
I need to build at least 3 level combobox,

I mean that the combo options be divided in 3 levele for example:

Level 1
          Level2
                   Option1
Level 1
          Level2
                   Option1
0
Comment
Question by:Michael_O
  • 3
4 Comments
 
LVL 5

Expert Comment

by:eyeh8u
ID: 12542191
If you mean in a single combo box:

<script language="javascript">
function validateHandler();
{
  var objForm = document.forms.thisform;
  if( objForm.somefield.value == 'x' )
  {
    alert('You must select an option from the drop down list');
    objForm.somefield.focus();
    return false;
  } else {
    return true;
  }
}
</script>

<form name="thisform" onsubmit="validateHandler();">
<select name="somefield">
<option value="x">Level 1</option>
<option value="x">      Level 2</option>
<option value="1">           Option 1</option>
<option value="x">Level 1</option>
<option value="x">      Level 2</option>
<option value="2">           Option 2</option>
</select>
<input type="submit">
</form>

Essentialy the technique is to use a 'dummy' value for the non-selectable options in the box, and use white space to indent the levels. Then you use the form's onsubmit event to check whether the user has selected a valid item in the drop down list. If they have, you return true from the handler and the submission proceeds. If they haven't you provide an error message, and return false, cancelling the form submit. You can also validate other things on the form while you are at it.
0
 

Author Comment

by:Michael_O
ID: 12542233
Thank you for prompt reply. But I want it to be like Optgroup, it means that use can only choose the last level option. the two other levels are only for grouping.
0
 
LVL 5

Accepted Solution

by:
eyeh8u earned 2000 total points
ID: 12542265
Then use the onchange handler for the select field

function somefield_onchange(obj)
{
  return !(this.value == 'x');
}

<select name="somefield" onchange="somefield_onchange(this)">
---
</select>

The technique is the same, except we're using the on-change handler, when the user selects something from the drop down, the value is checked, if it's the dummy value, then false will be returned and the selection will be cancelled, if they select a valid value it will remain selected. You'd probably still want form validation though.

You can't 'disable' a row in a combo box other than using that technique AFAIK, if you really want optgroup, then use optgroups:

Level 1<br>
&nbsp;Level 2<br>
&nbsp;&nbsp;<input type="radio" name="option" value="1"> Option 1<br>
Level 1<br>
&nbsp;Level2<br>
&nbsp;&nbsp;<input type="radio" name="option" value="2"> Option 2<br>

Only one of the options will be selectable, there is no way to select the Level elements as they are just text displayed.
0
 
LVL 5

Expert Comment

by:eyeh8u
ID: 12542282
Now I'm worried that it might be onselect. Pretty sure it's onchange, but I have self-doubt now...
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses

581 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