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

selFunc函数代码：


		
使用jQuery语法：$("#sel").val()或js语法：document.getElementById("sel").value均可得到所选值

要想获得选中的option的文本，使用$("#sel").attr("relText")获得relText属性值即可。

注意onchange函数中不能传递this，例如使用selFunc(this)是无法通过this.value获得值



下拉框不可用时效果：



 代码：
 

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

	
	

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

 
  
 

	

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

 文本框：

 下拉框：
 

	
	

	
	

下拉框支持分组，效果如下：

	
代码与普通select分组代码一样
 

	
	

	
	


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


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

	

getSelValue()函数代码：
 


	

	
	
	

		下拉框可以实现无限极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，设置父select的childId为子的id名，并设置childDataPath和childDataType。

	因为本例使用的是xml文件，所以childDataType="xml"。实际使用时如果是从action或jsp中读取的，则不用写childDataType或childDataType="url"

	注意：不需要联动的选项要将option的value设为空，例如本例的”请选择专业“选项。
	不可以不写value否则系统会默认设置为option的文本值。
	
	
	
子下拉框读取的XML数据格式如下：


	
	其中头部一定要有，encoding值根据所属工程的编码而定。如果工程是GBK编码，则头部应encoding="GBK"

	取得所选择值的函数getOptValue1代码如下：


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

	学院：
	  
	专业：
	  
	 班级：
	 
	 
	
	
代码如下





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



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





获取所选值函数代码：


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



	因为如果不加这一项，第二级select默认会联动到“专业1”，而第三级却不会自动联动到“专业1”所对应的班级。

	所以第二级加上value=""的选项，这样第三级不自动联动也不会有问题。这时再选择第二级就会触发联动实现第三极加载。

	而第三级是最后一级所以不必加value=""的选项，直接关联到第一项“班级1”即可。


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

	
	

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

	
	代码如下：


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

	
		代码如下：


	
	

	
	
	

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

		
		
代码：


	
	JS代码


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

	
	
	


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


 
 
 
 
 


代码如下：




函数如下：



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

	

	
	
	

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