如何默认显示禁用的HTML选择选项？

Question

我是HTML和PHP的新手，想从MySQL表中实现一个下拉菜单，并且也要硬编码。我的页面中有多个选择，其中之一是

<select name="tagging">
    <option value="">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

问题现在是用户也可以选择“Choose Tagging”作为他的标记，但我只想让他从可用的三个中选择。我使用了禁用。

<select name="tagging">
    <option value="" disabled="disabled">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

但现在，“选项A”已成为默认选项。因此，我希望将“选择标记”设置为默认选项，并且还想禁止其进行选择。是否有方法可以实现这一点。需要对另一个选择框执行相同的操作，它将从Mysql中获取数据。任何建议都将不胜感激。

- Ankit Sharma

---

如何在选择器上添加一个点击事件以禁用第一个选项？ - D Blacksmith

你需要修复语法错误 - value=""disabled 应该改为 disabled="disabled" + 删除奇数的闭合 </select> 标签。 - Evgeniy

@Evgeniy 哎呀，那个 </select> 属于我代码的其他部分。 - Ankit Sharma

@AnkitSharma 我修改了你的代码 - 你写了 </select><select><option>...<option> </select>。 - Evgeniy

@Evgeniy 谢谢..... </select> 由于错误而从我的代码中复制了。 - Ankit Sharma

@DavidSmith，我的任务已经完成，但我仍然想知道点击事件是什么。它是通过表单实现的吗？ - Ankit Sharma

Answer 1

使用

<option selected="true" disabled="disabled">Choose Tagging</option>    

- Cris

---

不需要写 true 或 disabled 值。你可以这样做：<option selected disabled>选择标签</option>。 - Sam Eaton

@SamEaton，这只是让代码遵循有效的XHTML语法，否则在HTML5中可以忽略它。 - Cris

如果你也设置了"required"属性，那么应该将"value"设置为空字符串，这样如果没有从下拉列表中选择任何选项，则会引发错误。否则，即使未选择任何内容，也会传递一个空值。示例代码如下：<option selected="true" disabled="disabled" value="">选择标签</option> - user34612

从技术上讲，在 html5 中使用 selected="true" 是无效的。https://dev59.com/0HNA5IYBdhLWcg3wQ7Yw#24588336 - Nick

Answer 2

使用 hidden。

<select>
   <option hidden>Choose</option>
   <option>Item 1</option>
   <option>Item 2</option>
</select>

这并不会取消它，但你可以在默认情况下显示时将其隐藏在选项中。

- Thielicious

---

这恰好是我在寻找的。非常感谢！ - GucciBananaKing99

这看起来很花哨。 - Lead Developer

这非常有用！谢谢！ - FFLNVB

Answer 3

在 HTML5 中，选择一个禁用的选项：

<option selected disabled>Choose Tagging</option>

- Pradeep Kumar

Answer 4

使用 Electron + React。

让你的前两个选项看起来像这样。

<option hidden="true">Choose Tagging</option>
<option disabled="disabled" default="true">Choose Tagging</option>

关闭时首先显示。

列表展开时首先显示第二个。

- Benjamin

Answer 5

我知道你想要禁用这个选项，但我认为这个解决方案可以达到与禁用选项相同的视觉效果，尽管它可能会略微减少资源的需求。

使用 optgroup 标签，就像这样：

<select name="tagging">
    <optgroup label="Choose Tagging">
        <option value="Option A">Option A</option>
        <option value="Option B">Option B</option>
        <option value="Option C">Option C</option>
    </optgroup>
</select>

- Mandrake

---

这个不起作用，OP需要默认选择它。 https://jsfiddle.net/tomsihap/5xm7grnb/ - tomsihap

Answer 6

针对希望保持第一个选项为空的人们，这是另一种SELECT标签的解决方案。

<label>Unreal :</label>
<select name="unreal">
   <option style="display:none"></option>
   <option>Money</option>
   <option>Country</option>
   <option>God</option>
</select>

- c0degeas

Answer 7

            <select name="dept" id="dept">
                <option value =''disabled selected>Select Department</option>
                <option value="Computer">Computer</option>
                <option value="electronics">Electronics</option>
                <option value="aidt">AIDT</option>
                <option value="civil">Civil</option>
            </select>

使用“SELECTED”，可以设置默认选中的选项。谢谢。

- Abdullah Mahi

---

这个指导已经在这个问题的链接中发布了：https://dev59.com/kmEh5IYBdhLWcg3wyF48#42997841。你的回答没有为页面增加任何新价值，只会导致页面膨胀。 - mickmackusa

Answer 8

我们可以禁用这种技术。

<select class="form-control" name="option_select">
  <option selected="true" disabled="disabled">Select option </option>
  <option value="Option A">Option A</option>
  <option value="Option B">Option B</option>
  <option value="Option C">Option C</option>
</select>

- Siddharth Shukla

Answer 9

 selected disabled="true"

使用它。它适用于新的浏览器。

- Ronak Bokaria

Answer 10

如果您使用jQuery来填充您的选择元素，您可以使用以下代码：

html

<select id="tagging"></select>

JavaScript (JS)

array_of_options = ['Choose Tagging', 'Option A', 'Option B', 'Option C']

$.each(array_of_options, function(i, item) {
    if(i==0) { sel_op = 'selected'; dis_op = 'disabled'; } else { sel_op = ''; dis_op = ''; }
    $('<option ' + sel_op + ' ' + dis_op + '/>').val(item).html(item).appendTo('#tagging');
  })

这将使用户能够看到第一个选项作为禁用的标题（“选择标记”），并选择所有其他选项。

- Cybernetic