select下拉框美化

http://dl.dbank.com/c04csxtesr

基本用法

单选下拉框的写法与传统的一样。支持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>

posted @ 2012-07-17 19:58 haiwei.sun 阅读(2301) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

kevin

http://blog.csdn.net/helen_shw

select下拉框美化

公告