listbox with locked lines

[Mokka]

Hi,

I have this listbox and I would like to lock some of the lines so that
the user can't select them. It's the 2 main areas "2798 Mokka"
and "3892 Juice" I don't won't the user to be able to select.
basically alle the lines that has a numer in front of the title needs
to be locked.

Please help!

<select name="ListBox" size="5" multiple="multiple" id="ListBox">

<option>2798 Mokka</option>
<option>indian blend</option>
<option>arabian blend</option>
<option>3892 Juice</option>
<option>Orange juice</option>
<option>cucumber juice</option>

</select>

 

[Thomas 'PointedEars' Lahn]

I have this listbox and I would like to lock some of the lines so that
the user can't select them. It's the 2 main areas "2798 Mokka"
and "3892 Juice" I don't won't the user to be able to select.
basically alle the lines that has a numer in front of the title needs
to be locked.

Use the `optgroup' element instead.

[...]
<select name="ListBox" size="5" multiple="multiple" id="ListBox">

<option>2798 Mokka</option>
<option>indian blend</option>
<option>arabian blend</option>
<option>3892 Juice</option>
<option>Orange juice</option>
<option>cucumber juice</option>

</select>

<select name="ListBox" size="5" multiple="multiple">
<optgroup label="2798 Mokka">
<option>indian blend</option>
<option>arabian blend</option>
</optgroup>
<optgroup label="3892 Juice">
<option>Orange juice</option>
<option>cucumber juice</option>
</optgroup>
</select>


PointedEars

 

[mick white]

Thomas 'PointedEars' Lahn wrote:

<select name="ListBox" size="5" multiple="multiple">
<optgroup label="2798 Mokka">
<option>indian blend</option>
<option>arabian blend</option>
</optgroup>
<optgroup label="3892 Juice">
<option>Orange juice</option>
<option>cucumber juice</option>
</optgroup>
</select>

Or:
<script type="text/javascript">
function getCategory(opt){
return opt.parentNode.label;
}
</script>
<form action="">
<select name="listBox" size="6"
onchange="this.form.x.value=getCategory(this[this.selectedIndex]);">
<optgroup label="2798 Mokka">
<option>indian blend</option>
<option>arabian blend</option>
</optgroup>
<optgroup label="3892 Juice">
<option>orange juice</option>
<option>cucumber juice</option>
</optgroup>
</select>
<input name="x" type="text" readonly value="">
</form>
Mick

 

[Thomas 'PointedEars' Lahn]

<select name="ListBox" size="5" multiple="multiple">
<optgroup label="2798 Mokka">
<option>indian blend</option>
<option>arabian blend</option>
</optgroup>
<optgroup label="3892 Juice">
<option>Orange juice</option>
<option>cucumber juice</option>
</optgroup>
</select>
Or:

Or?

<script type="text/javascript">
function getCategory(opt){
return opt.parentNode.label;
}
</script>
<form action="">
<select name="listBox" size="6"
onchange="this.form.x.value=getCategory(this[this.selectedIndex]);">
<optgroup label="2798 Mokka">
<option>indian blend</option>
<option>arabian blend</option>
</optgroup>
<optgroup label="3892 Juice">
<option>orange juice</option>
<option>cucumber juice</option>
</optgroup>
</select>
<input name="x" type="text" readonly value="">
</form>

That is an interesting solution, yet not one that address the OP's wish:

| It's the 2 main areas "2798 Mokka" and "3892 Juice" I don't won't the
| user to be able to select.

And it introduces a dependency to client-side scripting for no obvious
reason, so I really wonder why you posted it in the first place.


PointedEars

 

[mick white]

mick white wrote: [...]


That is an interesting solution, yet not one that address the OP's wish:

| It's the 2 main areas "2798 Mokka" and "3892 Juice" I don't won't the
| user to be able to select.

And it introduces a dependency to client-side scripting for no obvious
reason, so I really wonder why you posted it in the first place.

Just free flowing thoughts put to paper...
Cheers.
Mick

 

[Thomas 'PointedEars' Lahn]

<select name="ListBox" size="5" multiple="multiple" id="ListBox">

<option disabled="disabled" >2798 Mokka</option>
<option>indian blend</option>
<option>arabian blend</option>
<option disabled="disabled" >3892 Juice</option>
<option>Orange juice</option>
<option>cucumber juice</option>

</select>

In HTML, boolean attributes like `multiple' and `disabled' have no value,
the above is X(HT)ML syntax. And there is no need for `disabled', since
the `optgroup' element exists since HTML 4 as well as the `disabled'
attribute does. In contrast, UAs not supporting the `disabled' attribute
for some reason (such as HTML 3.2 support only), will allow to select the
respective `option' element anyway.

So this is not a viable solution.


PointedEars