选择后禁用下拉菜单后如何从下拉列表中获取所选值

Question

I have this code below. Everything will be disabled after a selection.

<select id="dropdown" name="dropdown" onchange="javascript:this.disabled = 'disabled';">
<option value="dropdown">Pls select one
<option value="apple">Apple
<option value="oragne">Orange
<option value="grapes">Grapes
</select>

But when I hit submit, the value for the "dropdown" is not being passed. Am I missing something here?

Answer 1

Disabled form controls don't get submitted. This is normal behaviour.

One work around is to copy the selected value to a hidden input that would get submitted.

(I really don't recommend disabling a select on change though - what if the user accidentally clicked the wrong thing? What if they were trying to select with the keyboard?)

(And as another aside, you don't need javascript: in inline event attributes.)

EDIT: How to implement the hidden input? Well, give the hidden input the name that your server-side code expects (and remove the name attribute from the select element):

<input type="hidden" name="dropdown" id="dropdown">

And then your onchange attribute would be something like:

<select onchange="document.getElementById('dropdown').value=this.value; this.disabled=true;">

Answer 2

The value of your selected option from your dropdown will not be passed its because you had your dropdown disabled. maybe thats the reason why. try not disabling it.

Answer 3

It seems disabled selection does not submit by default.

You can add another hidden selection element. And use script to make choice to submit.

Answer 4

It doesn't really make sense to disable a control, then submit its value. If you want the value submitted, don't disable it.

Anyhow, one option is to enable the control before submitting:

<form ... onsubmit="this.dropdown.disabled = false;">

Now you don't have to copy the value anywhere and the value will be submitted whether the control is disabled or not.