HTML——select下拉选择标签

select的基本语法：

?

1 2 3

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

　　

例子：

?

1 2 3 4 5 6 7

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

　　

1、<select> 的属性：

（1）name属性

?

1 2 3 4 5 6

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

　　

（2）size属性

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

?

1 2 3 4 5 6

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

　　

（3）multiple属性

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

?

1 2 3 4 5 6 7 8 9

<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 属性可以禁用下拉列表，使其不能再获得焦点或被修改。被禁用后，它的值不会提交：

?

1 2 3 4 5 6 7 8 9

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

实现选项的默认选中：

?

1 2 3 4 5 6 7 8 9

<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 值并不会显示在页面上：

?

1 2 3 4 5 6 7 8 9

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