创建
直接撸代码
<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>
这种情况下我们下拉列表显示了两个选项,且变成了点击上下切换了(默认是悬浮下拉)。
选中
选中某一个值
$('input[name="selectName"]').find('option[value="youWantValue"]').attr('selsected','selected');