单选下拉框的写法与传统的一样。支持TAB键打开和上下箭头选择option。支持onchange事件，见下面
选中项：2
代码如下：

<select  onchange='selFunc()' id="sel"><option value="">请选择功能</option><option value="1">新增图片</option><option value="2">维护图片</option><option value="3">新增新闻</option></select>

selFunc函数代码：

function selFunc(){$("#selText").text($("#sel").val())
}

使用jQuery语法：$("#sel").val()或js语法：document.getElementById("sel").value均可得到所选值
要想获得选中的option的文本，使用$("#sel").attr("relText")获得relText属性值即可。
注意onchange函数中不能传递this，例如使用selFunc(this)是无法通过this.value获得值

下拉框不可用时效果：

代码：

<select disabled="true"><option value="">请选择功能</option><option value="1">新增图片</option><option value="2">维护图片</option><option value="3">新增新闻</option>
</select>

要动态设置下拉框是否可用见下面“动态修改下拉框”。

下拉框默认会有一个宽度，即使选项里面有很长的文字。如果想要下拉框的宽度适应最长选项的宽度，则设置select标签的autoWidth="true"。效果如下：

 <select autoWidth="true"><option value="0">请选择功能</option><option value="新增图片">很长的选项文字很长的选项文字</option><option value="维护图片">维护图片</option><option value="新增新闻">新增新闻</option></select>
<select autoWidth="true"><option value="10">10</option><option value="20">20</option><option value="50">50</option><option value="100">100</option></select>

另外还可以通过style强制一个宽度，注意只有当 autoWidth="true"时有效
文本框：
下拉框：

 文本框：<input type="text"  style="width:350px;"/><br />下拉框：<select autoWidth="true" style="width:350px;"><option value="0">请选择功能</option><option value="新增图片">新增图片</option><option value="维护图片">维护图片</option><option value="新增新闻">新增新闻</option></select>

下拉框支持分组，效果如下：
代码与普通select分组代码一样

<select><option>请选择权限</option><optgroup label="首页信息发布"><option value="新增图片">新增图片</option><option value="维护图片">维护图片</option><option value="新增新闻">新增新闻</option></optgroup><optgroup label="人员维护"><option value="新增用户">新增用户</option><option value="用户列表">用户列表</option></optgroup>
</select>

设置下拉框的editable="true"，就把它变成了一个可编辑的下拉框。见下面

下拉框会自动生成一个editValue属性。通过这个属性来获得输入或选择的值，注意这时得到的值不是option的value而是显示在下拉框中的字符。

<select editable="true" id="editSel" ><option value="">请输入或选择</option><option value="1">新增图片</option><option value="2">维护图片</option><option value="3">新增新闻</option></select><input type="button" value="获取值" onclick="getSelValue()"/>

getSelValue()函数代码：

function getSelValue(){var msg="";msg=$("#editSel").attr("editValue")if(msg==""||msg==undefined){msg="无输入"}alert(msg);
}

下拉框可以实现无限极ajax联动。实现联动步骤：
1、对父select设置childId，childId指定为想要联动的下拉框。
2、对父select设置childDataPath，childDataPath为读取数据的路径。 下拉框会自动以”该路径+选中option的value“拼出url来获取数据。例如 childDataPath="http://192.168.31.30:8080/kj/trainplan.do?method="而某个option的value为bj1则当选择该项时会自动读取 http://192.168.31.30:8080/kj/trainplan.do?method=bj1来取得xml数据赋给子下拉框。
3、如果数据不是以url取得的而是从文件中取得，则需要设置childDataType属性。 例如childDataPath="xmlData/"而childDataType="xml"则数据将从"xmlData/bj1.xml"取得。如果是从txt文件取得则childDataType="txt"
4、使用jQuery语法：$("#sel").val()或js语法：document.getElementById("sel").value可得到所选值，使用$("#sel").attr("relText")可得到选中option的文本。 举例如下：
二级联动:IE浏览器想观看效果请将本页面放在服务器目录下通过http地址访问
所学专业：    所属班级：
代码如下：

所学专业：
<select id="sxzy" childId="ssbj" childDataPath="xmlData/" childDataType="xml"><option value="">请选择专业</option><option value="bj1">专业1</option><option value="bj2">专业2</option><option value="bj0">大数据测试</option></select>  所属班级：<select id="ssbj"><option value="0">请先选择专业</option></select>
<input type="button" value="获取选中值" onclick="getOptValue1()"/>

如上代码所示，有父与子两个select，设置父select的childId为子的id名，并设置childDataPath和childDataType。
因为本例使用的是xml文件，所以childDataType="xml"。实际使用时如果是从action或jsp中读取的，则不用写childDataType或childDataType="url"
注意：不需要联动的选项要将option的value设为空，例如本例的”请选择专业“选项。 不可以不写value否则系统会默认设置为option的文本值。
子下拉框读取的XML数据格式如下：

<?xml version="1.0" encoding="UTF-8"?>
<root><node value="bj1" text="班级1"/><node value="bj2" text="班级2"/>
</root>

其中头部一定要有，encoding值根据所属工程的编码而定。如果工程是GBK编码，则头部应encoding="GBK" 取得所选择值的函数getOptValue1代码如下：

function getOptValue1(){var msg="";msg="value:"+$("#sxzy").val()+","+$("#ssbj").val()+"<br/>"+"文本："+$("#sxzy").attr("relText")+","+$("#ssbj").attr("relText")alert(msg);
}

再看一个三级联动例子：IE浏览器想观看效果请将本页面放在服务器目录下通过http地址访问
学院：    专业：    班级：
代码如下

学院：
<select id="xy" childId="zy" childDataPath="xmlData/" childDataType="xml"><option value="">请选择学院</option><option value="zy1">学院1</option><option value="zy2">学院2</option>
</select>
专业：
<select id="zy" childId="bj" childDataPath="xmlData/" childDataType="xml"><option value="">请先选择学院</option>
</select>  班级：
<select id="bj"><option value="">请先选择专业</option>
</select>
<input type="button" value="获取选中值" onclick="getOptValue2()"/>

每次选择学院时，只要option的value不为空就会通过ajax读取数据赋给选择专业的下拉框。路径分别为"xmlData/zy1.xml"和"xmlData/zy2.xml"。 zy1.xml的数据如下：

<?xml version="1.0" encoding="UTF-8"?>
<root><node value="" text="请选择专业"/><node value="bj1" text="专业1"/><node value="bj2" text="专业2"/><node value="bj3" text="专业3"/>
</root>

每次选择专业时，只要option的value不为空就会通过ajax读取数据赋给选择班级的下拉框。路径分别为"xmlData/"下的bj1.xml——bj6.xml。 bj1.xml的数据如下：

<?xml version="1.0" encoding="UTF-8"?>
<root><node value="01" text="班级1"/><node value="02" text="班级2"/>
</root>

获取所选值函数代码：

function getOptValue2(){var msg="";msg="value:"+$("#xy").val()+","+$("#zy").val()+","+$("#bj").val()+"<br/>"+"文本："+$("#xy").attr("relText")+","+$("#zy").attr("relText")+","+$("#bj").attr("relText")alert(msg);
}

这里要注意的是，每次取的XML数据最好都加一条“请选择XX”的node节点（最后一个select的数据除外）并将value设为空。如

<root><node value="" text="请选择专业"/><node value="zy1" text="专业1"/><node value="zy2" text="专业2"/><node value="zy3" text="专业3"/>
</root>

因为如果不加这一项，第二级select默认会联动到“专业1”，而第三级却不会自动联动到“专业1”所对应的班级。
所以第二级加上value=""的选项，这样第三级不自动联动也不会有问题。这时再选择第二级就会触发联动实现第三极加载。
而第三级是最后一级所以不必加value=""的选项，直接关联到第一项“班级1”即可。

更多级联动的下拉框也是上面的思路，请自行尝试。

当下拉框项目过多时，可以对select设置colNum来指定列数，并且设置colWidth指定每列宽度。效果如下：
代码如下：

<select colNum="3" colWidth="90"><option>北京市</option><option>天津市</option><option>河北省</option><option>山西省</option><option>内蒙古自治区</option><option>辽宁省</option><option>吉林省</option><option>黑龙江省</option><option>上海市</option><option>江苏省</option><option>浙江省</option><option>安徽省</option><option>福建省</option><option>江西省</option><option>山东省</option><option>湖南省</option><option>湖北省</option><option>河南省</option><option>广东省</option><option>广西壮族自治区</option><option>海南省</option><option>重庆市</option><option>四川省</option><option>贵州省</option><option>云南省</option><option>西藏自治区</option><option>陕西省</option><option>甘肃省</option><option>青海省</option><option>宁夏回族自治区</option><option>新疆维吾尔自治区</option><option>香港特别行政区</option><option>澳门特别行政区</option><option>台湾省</option><option>其他</option>
</select>

如果不指定列宽，则每列会以最大项目的宽为列宽。效果如下：
代码如下：

<select colNum="3"><option>北京市</option><option>天津市</option><option>河北省</option><option>山西省</option><option>内蒙古自治区</option><option>辽宁省</option><option>吉林省</option><option>黑龙江省</option><option>上海市</option><option>江苏省</option><option>浙江省</option><option>安徽省</option><option>福建省</option><option>江西省</option><option>山东省</option><option>湖南省</option><option>湖北省</option><option>河南省</option><option>广东省</option><option>广西壮族自治区</option><option>海南省</option><option>重庆市</option><option>四川省</option><option>贵州省</option><option>云南省</option><option>西藏自治区</option><option>陕西省</option><option>甘肃省</option><option>青海省</option><option>宁夏回族自治区</option><option>新疆维吾尔自治区</option><option>香港特别行政区</option><option>澳门特别行政区</option><option>台湾省</option><option>其他</option>
</select>

与普通动态添加dom节点的方法一样，不同的是要在添加完毕的最后对其调用selectbox()方法来动态渲染。

代码：

<input type="button" value="点击生成下拉框" id="testBtn"/>

JS代码

$(function(){$("#testBtn").click(function(){var $selbox=$('<select><option value="0">请选择功能</option><option value="1">新增图片</option><option value="2">维护图片</option></select>')$(this).after($selbox)//将下拉框加到按钮的后面$selbox.selectbox();//渲染下拉框})
})

能够调用selectbox()方法的必须是一个jQuery节点对象。如果是普通的dom对象，需要用$(xxx)来转成jQuery节点对象。

和修改普通下拉框的做法一样，不同的是需要在最后调用selRefresh(下拉框ID)来更新显示。

代码如下：

<select  id="sel2"><option value="0">请选择功能</option><option value="1">新增图片</option><option value="2">维护图片</option><option value="3">新增新闻</option>
</select>
<input type="button" value="选中第2项" onclick="changeItem()"/>
<input type="button" value="新增1项" onclick="addItem()"/>
<input type="button" value="删除1项" onclick="removeItem()"/>
<input type="button" value="设为不可用" onclick="disableSelect()"/>
<input type="button" value="设为可用" onclick="enableSelect()"/>

函数如下：

function changeItem(){$("#sel2").val(2);selRefresh("sel2");
}
var idx=3
function addItem(){idx++var sel=$("#sel2")[0];sel.options[sel.options.length] = new Option("新增项", idx);$("#sel2").val(idx);selRefresh("sel2");
}
function removeItem(){var sel=$("#sel2")[0];sel.options.length--;idx--$("#sel2").val(idx);selRefresh("sel2");
}
function disableSelect(){$("#sel2").attr("disabled",true);selRefresh("sel2");
}
function enableSelect(){$("#sel2").attr("disabled",false);selRefresh("sel2");
}

另外selRefresh()中的参数也可以是下拉框的jQuery节点对象。

如果希望使用系统默认的下拉框，则使用class

<select class="default"><option value="1">新增图片</option><option value="2">维护图片</option><option value="3">新增新闻</option></select>