Html select标签

创建

直接撸代码

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Form 事件

这里主要介绍onchange，
在下拉列表的值改变时触发

<select id="industry" onchange="industryChange(this)">
       <option value="未选择" selected="selected">--请选择客户分类--</option>                     
       <option value="消费电子">消费电子</option>
       <option value="家用电器">家用电器</option>
       <option value="通信与网络">通信与网络</option>
       <option value="汽车与运输">汽车与运输</option>
       <option value="工业">工业</option>
       <option value="医疗保健">医疗保健</option>
       <option value="军事与太空">军事与太空</option>
       <option value="安防与消防">安防与消防</option>
       <option value="电力与能源">电力与能源</option>
       <option value="其他">其他</option>
 </select>

属性

• selected默认选中
  在上面的代码中

    <option value="未选择" selected="selected">--请选择客户分类--</option>
  

  option标签里加上selected属性，表示默认选中。

• autofocus 规定在页面加载后文本区域自动获得焦点。

   <select autofocus>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
   </select>
  

• disabled 规定禁用该下拉列表

    <select disabled="disabled">
          <option value ="volvo">Volvo</option>
          <option value ="saab">Saab</option>
          <option value="opel">Opel</option>
          <option value="audi">Audi</option>
    </select>
  

• form 规定文本区域所属的一个或多个表单。

    <form action="demo_form.asp" id="carform">
       Firstname:<input type="text" name="fname">
       <input type="submit">
    </form>
    
    <select name="carlist" form="carform">
       <option value="volvo">Volvo</option>
       <option value="saab">Saab</option>
       <option value="opel">Opel</option>
       <option value="audi">Audi</option>
    </select> 
  

  这里规定下拉列表属于carform表单

• multiple 属性规定可同时选择多个选项。

    <select multiple="multiple" size="2">
    	<option value ="volvo">Volvo</option>
    	<option value ="saab">Saab</option>
    	<option value="opel">Opel</option>
    	<option value="audi">Audi</option>
    </select>
  

  注意：
  在不同操作系统中，选择多个选项的差异：
  1. 对于 windows：按住 Ctrl 按钮来选择多个选项
  2. 对于 Mac：按住 command 按钮来选择多个选项
  由于上述差异的存在，同时由于需要告知用户可以使用多项选择，对用户更友好的方式是使用复选框。

• name 规定下拉列表的名称

• size 属性规定下拉列表中可见选项的数目。

    <select size="2">
      <option value ="volvo">Volvo</option>
      <option value ="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
  

  这种情况下我们下拉列表显示了两个选项，且变成了点击上下切换了（默认是悬浮下拉）。