<select> dropdowns

GoneShootin

What I would like to with a select box is to lock it such that it cannot be clicked on to generate the dropdown list. So only the first/select option is displayed within the select box and the user cannot select another option within that box.

I could set it to "disabled" - but it's ugly and hard to read as it grays out the text (IE).

Another option could be to simply set the style of each of the items to hidden - but I can't get that to work.

Ideas?

Ph3n0m

why can you not just populate the dropdown with options they are allowed to select - instead of this mix and match you are trying for

Gosh

Why use a select box when nothing can be selected?

seamus

You should be able to make it look fine through CSS while still setting it as disabled.

Gosh

In HTML4 you can specify disabled on each option

<SELECT NAME=selectbox>
  <OPTION selected>Option 1</OPTION >
  <OPTION DISABLED>Option 2 disabled</OPTION >
  <OPTION DISABLED>Option 3 disabled</OPTION >
</SELECT>

This works in Firefox but not in IE

There are javascript options available here

HTH - but still don't understand why you want to use a select box with nothing selectable. Have you considered using the following

<TEXTAREA NAME="comments" READONLY WRAP=OFF COLS=40 ROWS=2>
Option 1
Option 2
Option 3
Option 4
</TEXTAREA>

Serbian

Ph3n0m wrote:

why can you not just populate the dropdown with options they are allowed to select - instead of this mix and match you are trying for

Seems very strange alright. Why not display the option as text. If it's always going to show one thing that can't be changed by the user, it makes more sense to display it as text.

GoneShootin

On using the SELECT formfield - it's because I want to give the user the ability to choose items from that dropdown, but choose all items depending on what record they are working on at the time.

Gosh I spotted that, but unfortunately I'm limited to coding for IE and not solely FF.

Essentially it's reworking of existing PHP and Javascript code. Firefighting to the max!

Gosh

Essentially you need 2 select boxes linked in one of 2 ways. The first is to use HTML and Javascript.

<form name="myform"><div align="center">
<select name="record" size="1"
onchange="setOptions(document.myform.record.options[document.myform.record.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="1">Record 1</option>
<option value="2">Record 2</option>
<option value="3">Record 3</option>
</select><br /> <br />

<select name="subrecord" size="1">
<option value=" " selected="selected">Please select a record above first</option>
</select>
 <input type="button" name="go" value="Value Selected"
onclick="alert(document.myform.subrecord.options[document.myform.subrecord.selectedIndex].value);">
</div></form>

defines 2 select boxes (record and subrecord). The record box is filled with all possible values of the top level selector. The subrecord box is filled by the following javascript depending on the item selected in the record box.

<script language=javascript>
 function setOptions(chosen) {
 var selbox = document.myform.subrecord;
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select a record above first',' ');
 
}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new Option('Record 1 - Subrecord 1','11');
  selbox.options[selbox.options.length] = new Option('Record 1 - Subrecord 2','12');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new Option('Record 2 - Subrecord 1','21');
  selbox.options[selbox.options.length] = new Option('Record 2 - Subrecord 2','22');
}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new Option('Record 3 - Subrecord 1','31');
  selbox.options[selbox.options.length] = new Option('Record 3 - Subrecord 2','32');
}
}

</script>

If you cut and paste the above into an HTML page you'll see better what's going on - when the Value Selected button is pressed an alert will show you what value you have selected and hence this is the value posted with the form for the record select box.

The biggest disadvantage with this method is that all possible values of the subrecord will need to be generated with the original PHP script.

Another alternative is to cause the record select box to post back to the server and have the server rebuild the complete page showing the record select box and the filled subrecord box.

GoneShootin

Thanks for the efforts lads but in the end I just did a world of "style.display=none"s and used textfields/areas with \\r\\n where required where records existed in the DB.

Silly though how IE won't allow you to disable individual dropdown options easily.

Gosh

GoneShootin wrote:

Silly though how IE won't allow you to disable individual dropdown options easily.

That's because it's the one that probably adheres least to the HTML standards

GoneShootin

Gosh wrote:

That's because it's the one that probably adheres least to the HTML standards

And CSS!