HTML——select下拉选择标签

select的基本语法:

<select>
    <option></option>
</select>

  

例子:

<p>籍贯:
          <select name="province" id="" multiple size="2">
              <option value="">广东省</option>
              <option value="" selected>山东省</option>
              <option value="">河北省</option>
          </select>
</p>

  

1、<select> 的属性:

(1)name属性

<select name="selectList">
         <option>18岁以下</option>
         <option>18-28岁</option>
         <option>28-38岁</option>
         <option>38岁以上</option>
</select>

  

(2)size属性

下拉列表默认状态下只显示一个选项。如果需要让页面显示多个选项,就要使用 size 属性。

<select name="selectList" size="4">
         <option>18岁以下</option>
         <option>18-28岁</option>
         <option>28-38岁</option>
         <option>38岁以上</option>
</select>

  

(3)multiple属性

select默认是单项选择,multiple属性可以设置成多项选择:

<form action="http://vip.biancheng.net/login.php" method="post">
     年龄区间:
     <select name="selectList" multiple="multiple" size="4">
         <option>18岁以下</option>
         <option>18-28岁</option>
         <option>28-38岁</option>
         <option>38岁以上</option>
      </select>
</form>

注意:此时只需按住ctrl+鼠标左键就可以选择多个选项。multiple="multiple" 可以简写为 multiple。

 

(4)disabled 属性

disabled 属性可以禁用下拉列表,使其不能再获得焦点或被修改。被禁用后,它的值不会提交:

<form action="http://vip.biancheng.net/login.php" method="post">
     年龄区间:
     <select name="selectList" multiple="multiple" size="4" disabled>
         <option>18岁以下</option>
         <option>18-28岁</option>
         <option>28-38岁</option>
         <option>38岁以上</option>
      </select>
</form>

通过运行结果可以发现,下拉列表的每一项都被“灰化”(gray-out)了,而且不可以被选择。 

 

2、<option> 的属性

(1)selected属性

实现选项的默认选中:

<form action="http://vip.biancheng.net/login.php" method="post">
     年龄区间:
     <select name="selectList" multiple>
         <option selected="selected">18岁以下</option>
         <option>18-28岁</option>
         <option selected="selected">28-38岁</option>
         <option>38岁以上</option>
      </select>
</form>

  

(2)value属性

<option> 标签的 value 属性用来定义当下拉列表在提交时,发送给服务器的值。value 值并不会显示在页面上:

<form action="http://vip.biancheng.net/login.php" method="post">
    年龄区间: 
    <select name="selectList" multiple>
        <option selected="selected" value="underage">18岁以下</option>
        <option value="teens">18-28岁</option>
        <option selected="selected" value="youth">28-38岁</option>
        <option value="more">38岁以上</option>
    </select>
</form>

  

(3)disabled属性

<option> 标签也有 disabled 属性,不同于 <selected> 标签的 disabled 属性,它只能禁用列表中的某一项。

 

上一篇:2-14系统安全防护


下一篇:C#山寨版本【天翼拨号客户端】---内含详细抓包,模拟数据---万事俱备,只欠东风。