如何在选择后禁用下拉列表中的选定值

Question

我在下面有这个代码。选择后，所有内容都将被禁用。

<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>

但是当我点击提交时，“下拉列表”的值没有被传递。我在这里错过了什么吗？

Answer 1

禁用表单控件未提交。这是正常行为。

一种解决方法是将所选值复制到 提交的隐藏输入。

（我真的不建议禁用选择更改 - 如果用户不小心点击了错误的内容怎么办？如果他们试图用键盘选择怎么办？）

（另外，在内联事件属性中，您不需要javascript:。）

编辑：如何实现隐藏输入？好吧，给隐藏的输入提供服务器端代码所需的名称（并从select元素中删除name属性）：

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

然后您的onchange属性就像：

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

Answer 2

您下拉列表中所选选项的值不会被传递，因为您已禁用下拉列表。也许这就是原因。尽量不要禁用它。

Answer 3

默认情况下，禁用选择似乎不会提交。

您可以添加另一个隐藏的选择元素。并使用脚本来选择提交。

Answer 4

禁用控件然后提交其值是没有意义的。如果您想要提交的值，请不要禁用它。

无论如何，一个选项是在提交之前启用控件：

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

现在您不必将值复制到任何位置，无论控件是否被禁用，都将提交值。