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

我是新的 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 获取数据。任何建议都可以。

374406 次浏览
小开
最佳答案

使用

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

您可以像下面这样设置默认选择哪个选项:

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

小开

我知道您询问如何禁用该选项，但我认为最终用户的视觉效果与此解决方案是相同的，尽管它可能稍微减少了资源需求。

使用 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>
小开

在 HTML5中，选择禁用选项:

<option selected disabled>Choose Tagging</option>
小开

使用 hidden。

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

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

小开 
 selected disabled="true"

使用这个，它可以在新的浏览器中工作

小开

如果使用 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');
})

这将允许用户将第一个选项看作禁用的标题(“选择标记”) ，并选择所有其他选项。

enter image description here

小开

电子 + 反应。

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

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

关闭时首先显示。

列表打开时第一个显示的第二个。

小开

我们可以使用这种技术禁用。

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

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

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

小开 
            <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”按 defult 选择哪个选项。 谢谢

小开

这应该有帮助... . :)

<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value=""selected="true" disabled="disabled"> Select</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
小开

这将 藏起来的选项为您这个 更容易，使其他下拉框

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

提交答案