如何设置HTML select下拉框的默认值？-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

如何设置HTML select下拉框的默认值？

Apr 26, 2021 am 11:47 AM

html kotak drop down

本篇文章给大家介绍设置select下拉框默认值的方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

如何设置HTML select下拉框的默认值？

我们可以在所需选项上使用“selected”属性来设置select元素的默认值，这是一个布尔属性。

默认情况下，具有“selected”属性的option标签将显示在下拉列表select标签中。

语法：

&lt;option value=&quot;value&quot; selected&gt;选项名称&lt;/option&gt;

Salin selepas log masuk

示例1：使用selected属性

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset=&quot;utf-8&quot;&gt;
		&lt;title&gt;设置select元素的默认值&lt;/title&gt;
	&lt;/head&gt;
	&lt;body style = &quot;text-align:center;&quot;&gt;  
	    &lt;b&gt;如何设置select元素的默认值？&lt;/b&gt; 
	    &lt;p&gt;默认情况下，显示第一个option选项&lt;/p&gt; 
	    &lt;select name=&quot;plan&quot; id=&quot;plan&quot;&gt; 
	        &lt;option value=&quot;free&quot;&gt;Free&lt;/option&gt; 
	        &lt;option value=&quot;starter&quot;&gt;Starter &lt;/option&gt; 
	        &lt;option value=&quot;professional&quot;&gt;Professional&lt;/option&gt; 
	        &lt;option value=&quot;corporate&quot;&gt;Corporate&lt;/option&gt; 
	    &lt;/select&gt; 
	    &lt;p&gt;设置Professional选项为默认值&lt;/p&gt; 
	    &lt;select name=&quot;plan&quot; id=&quot;plan&quot;&gt; 
	        &lt;option value=&quot;free&quot;&gt;Free&lt;/option&gt; 
	        &lt;option value=&quot;starter&quot;&gt;Starter &lt;/option&gt; 
	        &lt;option value=&quot;professional&quot; selected&gt;Professional&lt;/option&gt; 
	        &lt;option value=&quot;corporate&quot;&gt;Corporate&lt;/option&gt; 
	    &lt;/select&gt; 
	&lt;/body&gt; 
  
&lt;/html&gt;

Salin selepas log masuk

效果图：

示例2：在列表中添加类似“请选择选项”的消息。此选项除了选中之外还具有隐藏和禁用属性。

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot;&gt;
	&lt;title&gt;设置select元素的默认值&lt;/title&gt;
&lt;/head&gt;
&lt;body style = &quot;text-align:center;&quot;&gt;  
    &lt;p&gt;设置select选项框的默认值&lt;/p&gt; 
    &lt;select name=&quot;plan&quot; id=&quot;plan&quot;&gt; 
        &lt;option value=&quot;none&quot; selected disabled hidden&gt;请选择选项&lt;/option&gt; 
        &lt;option value=&quot;free&quot;&gt;Free&lt;/option&gt; 
        &lt;option value=&quot;starter&quot;&gt;Starter &lt;/option&gt; 
        &lt;option value=&quot;professional&quot;&gt;Professional&lt;/option&gt; 
        &lt;option value=&quot;corporate&quot;&gt;Corporate&lt;/option&gt; 
    &lt;/select&gt;
&lt;/body&gt; 
  
&lt;/html&gt;

Salin selepas log masuk

效果图：

推荐学习：html视频教程

Atas ialah kandungan terperinci 如何设置HTML select下拉框的默认值？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn