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 属性，它只能禁用列表中的某一项。