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


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


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

HTML5

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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