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

时间:2014-02-26 06:52:12

标签: html html-select

我是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中获取数据。任何建议都会很明显。

11 个答案:

答案 0 :(得分:218)

使用

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

答案 1 :(得分:12)

HTML5中,选择已禁用的选项:

<option selected disabled>Choose Tagging</option>

答案 2 :(得分:9)

我知道你问如何禁用该选项,但我认为最终用户的视觉结果与此解决方案相同,尽管可能要求的资源要少一些。

使用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 :(得分:4)

电子+反应 让你的两个第一选择就像这样

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

首先关闭时显示 第二个在列表打开时首先显示

答案 4 :(得分:3)

 selected disabled="true"

使用它。它可以在新的浏览器中使用

答案 5 :(得分:1)

使用hidden

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

这并没有取消设置,但默认情况下,您可以将其隐藏在选项中。

jsfiddle

答案 6 :(得分: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');
  })

这将允许用户将第一个选项视为已禁用的标题(&#39;选择标记&#39;),然后选择所有其他选项。

enter image description here

答案 7 :(得分:1)

我们可以禁用此技术。

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

答案 8 :(得分:1)

另一种SELECT标记解决方案,适合那些希望将第一个选项留空的人。

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

答案 9 :(得分:0)

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

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

答案 10 :(得分: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”选择您要通过哪个选项选择。 谢谢