Geek Answers Handbook

Limit SELECT option selection without disabling the field

I have a multiple-select SELECT field that I don't want the end user to be able to change the value.

For UI purposes, I would like to be able to do this without using the disabled = "true" attribute. I tried using onmousedown, onfocus, onclick and set each to blur or return false, but without success.

Can this be done, or am I trying to do the impossible?

+6
html user-interface html-select
source share
7 answers

I know that you mentioned that you do not want, but I really think that using the disabled attribute is the best solution:

 <select multiple="multiple"> <option value="volvo" selected="true" disabled="disabled">Volvo</option> <option value="saab" disabled="disabled">Saab</option> <option value="opel" disabled="disabled">Opel</option> <option value="audi" disabled="disabled">Audi</option> </select>

If necessary, you can always give select a class and style it with CSS. This solution will work in all browsers regardless of scripting capabilities.

+8
source share

What are your UI reasons for not disabling selection?

If the control cannot be changed, it needs to disable the appearance, otherwise you will really confuse your users.

+5
source share

Could you do this with the onchange event?

 <select onfocus="this.oldIndex=this.selectedIndex" onchange="this.selectedIndex=this.oldIndex">
+2
source share

It is best to change the options in the selection window. If you have only one answer in this field, it does not matter if you can click it.

I would try to find another way to do this, as it seems to be frustrating to the user. Imagine this user scenario:

  • "Look, select the options box.
  • select
  • "Hm, why didn't it work?"
  • select
  • click
  • "This stupid thing is broken, I will never return here."

If you change the selection of HTML text, it will achieve the same goal. This is a pretty simple task for most major Javascript frameworks.

+2
source share

@Jack and @ 17 of 26 are a good point, but the end user will expect the selection window to be disabled, so confusion should not be a problem.

I should clarify why I could not just turn off the control.

An application that will use this will have to turn off the selection of parameters, and there is a requirement that the "locked" control still retain the appearance of ordinary format controls.

0
source share

Try this trigger.

 <select multiple onchange="this.selectedIndex=this.selectedIndex"> <option>1</option> <option>2</option> </select>
0
source share

Recently, a new CSS3 add-on has appeared, which is 95% compatible with all current browsers except Opera Mini, called pointer-events . Simply put, you can “disable” the default action on SELECT or any other element and still be able to execute certain events on it ...

You can view Chris Koye's article on them in the enter link here .

This is closer to what you are looking for ... Sorry that I could not provide any of my own coding examples ...

0
source share

More articles:


All Articles