html之select标签使用方法-html教程-PHP中文网

首页

web前端

html教程

html之select标签使用方法

Mar 24, 2017 am 11:47 AM

1、下拉式单选

&lt;select&gt;
     &lt;option value=&quot;=1&quot;&gt;上海&lt;/option&gt;
     &lt;option value=&quot;=2&quot; selected=&quot;selected&quot;&gt;北京&lt;/option&gt;
     &lt;option value=&quot;=3&quot;&gt;广州&lt;/option&gt;
&lt;/select&gt;

登录后复制

html之select标签使用方法

2、显示所有选项

这里有两种，一直只能单选，一种可多选

 &lt;select size=&quot;3&quot;&gt;
       &lt;option&gt;上海&lt;/option&gt;
       &lt;option&gt;广州&lt;/option&gt;
       &lt;option&gt;深圳&lt;/option&gt;
 &lt;/select&gt;
  
 &lt;select multiple=&quot;multiple&quot; size=&quot;3&quot;&gt;
       &lt;option&gt;上海&lt;/option&gt;
       &lt;option&gt;广州&lt;/option&gt;
       &lt;option&gt;深圳&lt;/option&gt;
 &lt;/select&gt;

登录后复制

html之select标签使用方法

3、元素分类

&lt;select&gt;
      &lt;optgroup label=&quot;河北省&quot;&gt;
          &lt;option&gt;石家庄&lt;/option&gt;
          &lt;option&gt;邯郸&lt;/option&gt;
          &lt;option&gt;枣阳&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label=&quot;湖北省&quot;&gt;
          &lt;option&gt;武汉&lt;/option&gt;
          &lt;option&gt;咸宁&lt;/option&gt;
          &lt;option&gt;赤壁&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label=&quot;河南省&quot;&gt;
          &lt;option&gt;郑州&lt;/option&gt;
          &lt;option&gt;安阳&lt;/option&gt;
          &lt;option&gt;驻马店&lt;/option&gt;
      &lt;/optgroup&gt;
&lt;/select&gt;

登录后复制

html之select标签使用方法