如何在默认情况下显示禁用 HTML 选择选项？

Posted 2023-02-24

【中文标题】如何在默认情况下显示禁用 HTML 选择选项？

【英文标题】：How to show disable HTML select option in by default?

【发布时间】：2014-03-28 20:10:10

【问题描述】：

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

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

<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 获取数据的 select 也需要做同样的事情。任何建议都将是可观的。

【问题讨论】：

如何在选择上添加点击事件以禁用第一个选项。

你必须修复语法错误 - value=""disabled should be disabled="disabled" + 移除奇数关闭标签

@Evgeniy 哎呀， 属于我的代码的其他部分

@AnkitSharma 我正在编辑你的代码 - 你有 ...

@Evgeniy thanx..... 错误地从我的代码中复制了。

【参考方案1】：

使用

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

【讨论】：

您不需要输入true 或disabled 值。你可以通过<option selected disabled>Choose Tagging</option>

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

您应该设置 value="" 所以如果您也需要，那么将引发错误以从下拉列表中进行选择，否则即使未选择任何内容，也会传递一个空值。 <option selected="true" disabled="disabled" value="">Choose Tagging</option>

【参考方案2】：

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

<option selected disabled>Choose Tagging</option>

【参考方案3】：

使用hidden。

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

这不会取消设置，但您可以在默认显示时将其隐藏在选项中。

【讨论】：

这正是我想要的。非常感谢！

【参考方案4】：

电子 + 反应。

让你的第一个选项看起来像这样。

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

关闭时首先显示。

列表打开时第二个先显示。

【参考方案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>

【讨论】：

这个不行，OP需要默认选中jsfiddle.net/tomsihap/5xm7grnb

【参考方案6】：

另一种 SELECT 标记解决方案，适用于希望将第一个选项保留为空白的用户。

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

【参考方案7】：

 selected disabled="true"

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

【参考方案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>

【参考方案9】：

如果你使用 jQuery 来填充你的选择元素，你可以使用这个：

html

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

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');
  )

这将允许用户将第一个选项视为禁用的标题（“选择标记”），并选择所有其他选项。

【参考方案10】：

            <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”默认选择您要选择的选项。 谢谢

【讨论】：

本指南已在此问题上发布：***.com/a/42997841/2943403 您的回答不会为页面增加新价值，只会导致页面膨胀。

【参考方案11】：

您可以像这样设置默认选择哪个选项：

<option value="" selected>Choose Tagging</option>

我建议使用 javascript 和 JQuery 来观察点击事件并在选择另一个选项后禁用第一个选项： 首先，给元素一个 ID，如下所示：

<select id="option_select" name="tagging">

和选项 id ：

<option value="" id="initial">Choose Tagging</option>

然后：

<script type="text/javascript">

$('option_select').observe(click, handleClickFunction);

然后你只需创建函数：

function handleClickFunction () 

if ($('option_select').value !== "option_select") 

   $('initial').disabled=true;