blocks|key|4654674|text|使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4654675|<option+selected="true"+disabled="disabled">Choose+Tagging</option>++++|code-block|syntax|javascript|4654676|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>use</p>

<pre><code>&lt;option selected="true" disabled="disabled"&gt;Choose Tagging&lt;/option&gt;    
</code></pre>


blocks|key|4654859|text|在HTML5中，要选择禁用的选项：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4654860|<option+selected+disabled>Choose+Tagging</option>|code-block|syntax|javascript|4654861|entityMap^0|1|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>In <code>HTML5</code>, to select a disabled option:</p>

<pre><code>&lt;option selected disabled&gt;Choose Tagging&lt;/option&gt;
</code></pre>


blocks|key|148390|text|使用hidden。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|148391|​|148392|<select>
+++<option+hidden>Choose</option>
+++<option>Item+1</option>
+++<option>Item+2</option>
</select>|code-block|syntax|javascript|148393|148394|这不会取消设置它，但您可以在默认情况下显示它时，在选项中隐藏它。|148395|entityMap^0|2|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>Use <code>hidden</code>.<br></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;
   &lt;option hidden&gt;Choose&lt;/option&gt;
   &lt;option&gt;Item 1&lt;/option&gt;
   &lt;option&gt;Item 2&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>

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


blocks|key|148435|text|电子%2B反应。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|148436|让你的前两个选项看起来像这样。|148437|<option+hidden="true">Choose+Tagging</option>
<option+disabled="disabled"+default="true">Choose+Tagging</option>|code-block|syntax|javascript|148438|第一个在关闭时显示。|148439|第二个在列表打开时首先显示。|148440|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Electron + React.</p>
<p>Let your two first options look like this.</p>
<pre><code>&lt;option hidden=&quot;true&quot;&gt;Choose Tagging&lt;/option&gt;
&lt;option disabled=&quot;disabled&quot; default=&quot;true&quot;&gt;Choose Tagging&lt;/option&gt;
</code></pre>
<p>First to display when closed.</p>
<p>Second to display first when the list opens.</p>


blocks|key|4654805|text|我知道您问如何禁用该选项，但我认为最终用户的视觉效果与此解决方案相同，尽管它对资源的要求可能略低。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4654806|使用optgroup标记，如下所示：|offset|length|4654807|<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>|code-block|syntax|javascript|4654808|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3.org/TR/html-markup/optgroup.html^0|0|2|8|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>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.</p>

<p>Use the <a href="https://www.w3.org/TR/html-markup/optgroup.html" rel="noreferrer">optgroup</a> tag, like so :</p>

<pre><code>&lt;select name="tagging"&gt;
    &lt;optgroup label="Choose Tagging"&gt;
        &lt;option value="Option A"&gt;Option A&lt;/option&gt;
        &lt;option value="Option B"&gt;Option B&lt;/option&gt;
        &lt;option value="Option C"&gt;Option C&lt;/option&gt;
    &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>


blocks|key|148494|text|为那些想要保留第一选项为空的人提供的另一种选择标签解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|148495|​|148496|<label>Unreal+:</label>
<select+name="unreal">
+++<option+style="display:none"></option>
+++<option>Money</option>
+++<option>Country</option>
+++<option>God</option>
</select>|code-block|syntax|javascript|148497|148498|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Another SELECT tag solution for those who want to keep first option blank.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label&gt;Unreal :&lt;/label&gt;
&lt;select name="unreal"&gt;
   &lt;option style="display:none"&gt;&lt;/option&gt;
   &lt;option&gt;Money&lt;/option&gt;
   &lt;option&gt;Country&lt;/option&gt;
   &lt;option&gt;God&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|148417|text|+selected+disabled="true"|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|148418|使用这个。它将在新的浏览器中工作|unstyled|148419|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code> selected disabled="true"
</code></pre>

<p>Use this. It will work in new browsers</p>


blocks|key|148459|text|我们可以禁止使用这种技术。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|148460|<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>|code-block|syntax|javascript|148461|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>we can disable using this technique.</p>

<pre><code>&lt;select class="form-control" name="option_select"&gt;
  &lt;option selected="true" disabled="disabled"&gt;Select option &lt;/option&gt;
  &lt;option value="Option A"&gt;Option A&lt;/option&gt;
  &lt;option value="Option B"&gt;Option B&lt;/option&gt;
  &lt;option value="Option C"&gt;Option C&lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|4654992|text|++++++++++++<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4654993|使用"SELECTED“选项，默认选择该选项。谢谢|unstyled|4654994|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>            &lt;select name="dept" id="dept"&gt;
                &lt;option value =''disabled selected&gt;Select Department&lt;/option&gt;
                &lt;option value="Computer"&gt;Computer&lt;/option&gt;
                &lt;option value="electronics"&gt;Electronics&lt;/option&gt;
                &lt;option value="aidt"&gt;AIDT&lt;/option&gt;
                &lt;option value="civil"&gt;Civil&lt;/option&gt;
            &lt;/select&gt;
</code></pre>

<p>use "SELECTED" which option you want to select by defult.
thanks</p>


blocks|key|148254|text|您可以按如下方式设置默认选择哪个选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|148255|<option+value=""+selected>Choose+Tagging</option>|code-block|syntax|javascript|148256|我建议使用javascript和JQuery来观察单击事件，并在选择另一个选项后禁用第一个选项:首先，给元素一个ID，如下所示：|148257|<select+id="option_select"+name="tagging">|148258|和选项an+id：|148259|<option+value=""+id="initial">Choose+Tagging</option>|148260|然后：|148261|<script+type="text/javascript">

$('option_select').observe(click,+handleClickFunction);|148262|然后，您只需创建函数：|148263|function+handleClickFunction+()+{

if+($('option_select').value+!==+"option_select")+
{
+++$('initial').disabled=true;+}
}|148264|​|148265|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

<p>You can set which option is selected by default like this:</p>

<pre><code>&lt;option value="" selected&gt;Choose Tagging&lt;/option&gt;
</code></pre>

<p>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: </p>

<pre><code>&lt;select id="option_select" name="tagging"&gt;
</code></pre>

<p>and the option an id : </p>

<pre><code>&lt;option value="" id="initial"&gt;Choose Tagging&lt;/option&gt;
</code></pre>

<p>then:</p>

<pre><code>&lt;script type="text/javascript"&gt;

$('option_select').observe(click, handleClickFunction);
</code></pre>

<p>Then you just create the function:</p>

<pre><code>function handleClickFunction () {

if ($('option_select').value !== "option_select") 
{
   $('initial').disabled=true; }
}
</code></pre>

<p></p>


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

<pre><code>&lt;select name="tagging"&gt;
    &lt;option value=""&gt;Choose Tagging&lt;/option&gt;
    &lt;option value="Option A"&gt;Option A&lt;/option&gt;
    &lt;option value="Option B"&gt;Option B&lt;/option&gt;
    &lt;option value="Option C"&gt;Option C&lt;/option&gt;
&lt;/select&gt;
</code></pre>

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

<pre><code>&lt;select name="tagging"&gt;
    &lt;option value="" disabled="disabled"&gt;Choose Tagging&lt;/option&gt;
    &lt;option value="Option A"&gt;Option A&lt;/option&gt;
    &lt;option value="Option B"&gt;Option B&lt;/option&gt;
    &lt;option value="Option C"&gt;Option C&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>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.</p>


How to show disable HTML select option in by default?

我是新手的HTML和PHP，并希望实现从mysql表和硬编码的下拉菜单。我在我的页面中有多个选择，其中之一是<select name="tagging">    <option value="">Choose Tagging</option>    <option value="Option A">Option A</option>    <option value="Option B">Opti

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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