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

I am new to HTML and PHP and want to achieve a drop-down menu from the mysql table and hard-coded too. I have multiple select in my page, One of them is

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

Problem is now that user can also select "Choose Tagging" as his tagging but i only want to provide him to chose from available three. I used disable as

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

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

But now "Option A" became the default one. So i want to set "Choose Tagging" as by default and also want to disable it from selection. Is it a way to do this. Same thing need to be done with other select which will fetch data from Mysql. Any suggestion will be appreciable.

但是现在“选项A”变成了默认选项。所以我想把"选择标签"设为默认，也想把它从"选择"中禁用。这是一种方法吗?从Mysql中获取数据的select也需要这样做。任何建议都是值得赞赏的。

10 个解决方案

#1

173

use

使用

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

#2

I know you ask how to disable the option, but I figure the end users visual outcome is the same with this solution, although it is probably marginally less resource demanding.

我知道您会问如何禁用该选项，但我认为最终用户的视觉结果与此解决方案是相同的，尽管它可能对资源的要求略有降低。

Use the optgroup tag, like so :

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

#3

In HTML5, to select a disabled option:

在HTML5中，选择一个禁用选项:

<option selected disabled>Choose Tagging</option>

#4

 selected disabled="true"

Use this. It will work in new browsers

用这个。它将在新的浏览器中工作

#5

If you are using jQuery to fill your select element, you can use this:

如果使用jQuery填充select元素，可以使用以下方法:

html

html

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

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

This will allow the user to see the first option as a disabled heading ('Choose Tagging'), and select all other options.

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

#6

Electron + React Let your two first options be like this

电子+反应让你的两个第一个选项是这样的

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

First to display when closed Second to display first when the list opens

当列表打开时，首先显示关闭的秒。

#7

Another SELECT tag solution for those who want to keep first option blank.

另一个选择标签解决方案，用于那些想要保留第一个选项为空的人。

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

#8

You can set which option is selected by default like this:

您可以设置哪个选项被默认选择如下:

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

I would suggest using javascript and JQuery to observe for click event and disable the first option after another has been selected: First, give the element an ID like so:

我建议使用javascript和JQuery来观察单击事件，并在选择另一个选项后禁用第一个选项:

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

and the option an id :

选择id:

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

then:

然后:

<script type="text/javascript">

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

Then you just create the function:

然后你只需要创建函数

function handleClickFunction () {

if ($('option_select').value !== "option_select") 
{
   $('initial').disabled=true; }
}

#9

Use hidden.

使用隐藏。

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

This doesn't unset it but you can however hide it in the options while it's displayed by default.

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

jsfiddle

#10

we can disable using this technique.

我们可以禁用这个技术。

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

#1

173

use

使用

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

#2