当前位置：首页 > news >正文

JQuery 封装脚本系列之下拉列表框(Select)

news 来源：原创 2024/5/5 23:28:05

2010-03-30

最近,把项目整理了一下. 把以前用的一些 javascript 脚本整理下, 特针对 JQuery 给出一系列的封装脚本.
-------------------------
我测试用的环境如下：

JQuery版本是 jquery1.3.2
IE7,IE8,Firefox下测试通过

首先你应该下载 jquery 的 js 库。请到官方下载。

Javascript 脚本【jquery-wellhope-select.js】

// // author: Power By Wellhope Corporation, All Rights Reserved // create time: 2009-11 // update site: http://blog.csdn.net/zhangyunbo1116 /** * function 增加一项 * */ function Wellhope_Select_AddItem(selectName,pvalue,ptext) { var jqueryObj = $(document.getElementById(selectName)) ; jqueryObj.append("<option value='"+pvalue+"'>"+ptext+"</option>"); } /** * function 是否存在特定值 * */ function Wellhope_Select_ExistItem(selectName,pvalue) { var jqueryObj = $(document.getElementById(selectName)) ; var domSelect = jqueryObj.get() var isExit = false; for (var i = 0; i < domSelect.options.length; i++) { if (domSelect.options[i].value == pvalue) { isExit = true; break; } } return isExit; } /** * function 删除一项 * */ function Wellhope_Select_RemoveItem(selectName) { var jqueryObj = $(document.getElementById(selectName)); // alert(jqueryObj.get(0).selectedIndex); if(jqueryObj.get(0).selectedIndex == -1) { alert("没有选中任何值,请先选择,然后删除."); return; } jqueryObj.find("option:selected").remove(); } /** * function 根据指定值选中一项 * */ function Wellhope_Select_SelectItemByValue(selectName,pvalue) { var jqueryObj = $(document.getElementById(selectName)) ; jqueryObj.val(pvalue); } /** * function 根据指定文本选中一项 * */ function Wellhope_Select_SelectItemByText(selectName,ptext) { var jqueryObj = $(document.getElementById(selectName)) ; var tvalue = jqueryObj.find("option[text='"+ptext+"']").val(); jqueryObj.val(tvalue); } /** * function 获取选中的值 * */ function Wellhope_Select_GetSelectedValue(selectName) { var jqueryObj = $(document.getElementById(selectName)) ; alert("jqueryObj.val()="+jqueryObj.val()); } /** * function 获取选中的文本 * */ function Wellhope_Select_GetSelectedText(selectName) { var jqueryObj = $(document.getElementById(selectName)) ; alert("jqueryObj.val()="+jqueryObj.find("option:selected").text()); } /** * 返回选中索引 */ function Wellhope_Select_GetSelectedIndex(selectName) { var jqueryObj = $(document.getElementById(selectName)) ; var index = jqueryObj.get(0).selectedIndex; return index; } /** * functin 清空下拉框 * */ function Wellhope__Select_ClearItems(selectName) { var jqueryObj = $(document.getElementById(selectName)) ; jqueryObj.empty() } //----------------------------

测试的HTML源文件:【jquery-wellhope-select-1.0.html】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>演示JQuery操作选择框</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body, html { font-size:12px; } ;</style> <mce:script type="text/javascript" src="jquery1.3.2.js" mce_src="jquery1.3.2.js"></mce:script> <mce:script type="text/javascript" src="jquery-wellhope-select.js" mce_src="jquery-wellhope-select.js"></mce:script> </head> <body> <mce:script type="text/javascript" language="javascript"></mce:script> <h2>演示使用JQuery操作选择框 Select</h2> </p> <hr /> <div id="divButtons" style=" border-width: thin; border-color:#009; border-style:solid;" mce_style=" border-width: thin; border-color:#009; border-style:solid;"> <input type="button" name="btn3" id="btn4" value="增加" οnclick="Wellhope_Select_AddItem('sltCity','值','值文本')" /> <input type="button" name="btn3" id="btn4" value="查看选中值" οnclick="Wellhope_Select_GetSelectedValue('sltCity')" /> <input type="button" name="btn3" id="btn4" value="查看选中文本" οnclick="Wellhope_Select_GetSelectedText('sltCity')" /> <input type="button" name="btn3" id="btn4" value="查看选中索引" οnclick="alert(Wellhope_Select_GetSelectedIndex('sltCity'))" /> <input type="button" name="btn3" id="btn4" value="清空下拉框" οnclick="Wellhope__Select_ClearItems('sltCity')" /> <input type="button" name="btn3" id="btn4" value="选择值为上海市的项" οnclick="Wellhope_Select_SelectItemByValue('sltCity','上海市')" /> <input type="button" name="btn3" id="btn4" value="选择文本为上海市文本的项" οnclick="Wellhope_Select_SelectItemByText('sltCity','上海市文本')" /> <input type="button" name="btn3" id="btn4" value="删除选中项" οnclick="Wellhope_Select_RemoveItem('sltCity')" /> </div> <p> </p> <div id="divContent" style=" border-width: thin; border-color:#009; border-style:dashed;" mce_style=" border-width: thin; border-color:#009; border-style:dashed;"> <p> <select id="sltCity" name="sltCity"> <option value="北京市" >北京市文本</option> <option value="上海市">上海市文本</option> <option value="徐州市">徐州市文本</option> <option value="官山镇">官山镇文本</option> </select> <br /> </p> </div> <p> </p> <br /> <br /> <br /> <br /> <h2>POWER BY WELLHOPE 2009</h2> </body> </html>

对于上面源码的说面, 把编辑器内的代码,拷贝出来, 然后运行即可. 建议把Javascript jquery-wellhope-select.js