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


139

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


如何在选择项上添加点击事件以禁用第一个选项。
大卫·史密斯

您必须修复语法错误-value =“” disabled应该被禁用=“ disabled” +移除奇数结束</ select>标签
Evgeniy 2014年

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

@AnkitSharma,我正在编辑您的代码-您有</ select> <select> <option> ... <option> </ select>
Evgeniy 2014年

@Evgeniy thanx ..... </ select>是错误地从我的代码中复制的。
Ankit Sharma

Answers:


290

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

42
您不需要放入trueor disabled值。你可以<option selected disabled>Choose Tagging</option>
Sam Eaton

18
@SamEaton,它只是使代码遵循有效的XHTML语法,否则在HTML5中您可以忽略它。
克里斯,2016年

1
您应该设置value =“”,这样,如果您还需要的话,将会出现错误,从下拉菜单中进行选择,否则即使没有选择任何内容,也会传递一个空值。 <option selected="true" disabled="disabled" value="">Choose Tagging</option>
user34612


10

我知道您会问如何禁用该选项,但是我认为最终用户的视觉效果与该解决方案相同,尽管它对资源的需求可能会略有减少。

使用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
这行不通,OP需要默认选择它jsfiddle.net/tomsihap/5xm7grnb
tomsihap

10

Electron + React让您的前两个选择像这样

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

第一次在关闭时显示,第二次在列表打开时显示


8

使用hidden

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

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


6

另一个SELECT标记解决方案,适用于那些希望将第一个选项保留为空白的人。

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



3

我们可以禁用使用此技术。

<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

如果您使用jQuery来填充您的select元素,则可以使用以下方法:

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

这将使用户可以将第一个选项视为禁用的标题(“选择标记”),并选择所有其他选项。

在此处输入图片说明


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


该指南已经发布在此问题的此处:stackoverflow.com/a/42997841/2943403 您的答案没有为页面添加任何新值,只会导致页面膨胀。
mickmackusa

-1

您可以设置默认情况下选中的选项,如下所示:

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.