n level Combo Box

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
Michael_OAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

eyeh8uCommented:
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
Michael_OAuthor Commented:
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
eyeh8uCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
eyeh8uCommented:
Now I'm worried that it might be onselect. Pretty sure it's onchange, but I have self-doubt now...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.