Jquery Plugin:Select box manipulation
来源:互联网 发布:android 网络异常汇总 编辑:程序博客网 时间:2024/05/16 18:12
Jquery相当强大,但是在操作Select的时候,还是比较麻烦,不尽人意,近来在使用Jquery时发现一个问题,如果通过如下方式动态添加select 的option 由于不是以Dom方式添加到Doml树中,因此操作option会有些问题:
var htmlselect = '<option selected=""selected"" value="""">请选择</option>';下面推荐一个Jquery Plugin:Select box manipulation
htmlselect = htmlselect+'<option value=""A"">A</option>';
htmlselect = htmlselect+'<option value=""B+"">B+</option>';
htmlselect = htmlselect+'<option value=""B"">B</option>';
htmlselect = htmlselect+'<option value=""C+"">C+</option>';
htmlselect = htmlselect+'<option value=""C"">C</option>';
htmlselect = htmlselect+'<option value=""D+"">D+</option>';
htmlselect = htmlselect+'<option value=""D"">D</option>';
htmlselect = htmlselect+'<option value=""E+"">E+</option>';
htmlselect = htmlselect+'<option value=""E"">E</option>';
htmlselect = htmlselect+'<option value=""F+"">F+</option>';
htmlselect = htmlselect+'<option value=""F"">F</option>';
$("#Select1").empty();
$("#Select1").append(htmlselect);
//访问索引为1的option
alert($("#Select1")[0].options[1].value); //此处不能正常访问
for(var i=0;i<$("#Select1")[0].options.length;i++)
{
//不能正常移除
$("#Select1")[0].options[i].selected ="true";
}
通过使用jquery.selectboxes.js我们完全可以用Dom对象方式操作option了
$("#Select1").empty(); //建议调用,否则有些小问题。jquery.selectboxes.js的部分说明
$("#Select1").removeOption(/./); //清空
var myOptions = {
"" : "请选择",
"A" : "A",
"B+" : "B+",
"B" : "B",
"C+" : "C+",
"C" : "C",
"D+" : "D+",
"D" : "D",
"E+" : "E+",
"E" : "E",
"F+" : "F+",
"F" : "F"
}
$("#Select1").addOption(myOptions, false);
//访问索引为1的option
alert($("#Select1")[0].options[1].value); //此处可以正常访问
for(var i=0;i<$("#Select1")[0].options.length;i++)
{
//能正常移除了
$("#Select1")[0].options[i].selected ="true";
}
addOption
You can add a single option: $("#myselect").addOption("Value", "Text");
, change the text of an existing option: $("#myselect").addOption("Value", "Text Replacement");
or add multiple options using a hash:
var myOptions = {
"Value 1" : "Text 1",
"Value 2" : "Text 2",
"Value 3" : "Text 3"
}
$("#myselect2").addOption(myOptions, false); // use true if you want to select the added options
ajaxAddOption(url[, params, select, fn, args])
Add options via AJAX (page must return valid JSON, sample below): $("#myselect2").ajaxAddOption("ajaxoptions.js");
.
{
"ajax1": "AJAX option 1",
"ajax2": "AJAX option 2",
"ajax3": "AJAX option 3"
}
Parameters
- url - Page to get options from (must be valid JSON)
- params (optional) - Any parameters to send with the request
- select (optional) - Select the added options, default true
- fn (optional) - call this function with the select object as param after completion
- args - (optional) array with params to pass to the function afterwards
removeOption(index/value/regex[, selectedOnly])
Remove an option by index: $("#myselect2").removeOption(0);
or value: $("#myselect").removeOption("Value");
or with a regular expression: $("#myselect").removeOption(/^val/i);
. To remove all options, you can do $("#myselect").removeOption(/./);
If you supply a second parameter as a boolean (true, false), then only options that have been selected (and matched) will be removed: $("#myselect2").removeOption("Value 2", true);
.
sortOptions([ascending])
Sorting is done as follows: $("#myselect2").sortOptions(false);
(descending) or $("#myselect2").sortOptions();
(ascending)
selectOptions(value[, clear])
Select options by value, using a string as the parameter $("#myselect2").selectOptions("Value 1");
, or a regular expression $("#myselect2").selectOptions(/^val/i);
. You can also clear already selected options: $("#myselect2").selectOptions("Value 2", true);
Originally coded by Mathias Bank, with a modification to allow it to take a regular expression.
copyOptions(to[, which])
You can copy options from one select to another: $("#myselect").copyOptions("#myselect2");
(copy selected options) or $("#myselect").copyOptions("#myselect2", "all");
(copy all options)
containsOption(value[, fn])
Checks if a select box has an option with the supplied value
Parameters
- value - Which value to check for. Can be a string or regular expression
e.g.if( $("#myselect").containsOption("val1") ) { ... }
orif( $("#myselect").containsOption(/^val/i) ) { ... }
- fn (optional) - Function to apply if an option with the given value is found. Use this if you don't want to break the chaining
e.g.$("#myselect").containsOption("val1", copyoption).doSomethingElseWithSelect(); // calls copyoption (user defined function) for any options found, chain is continued
selectedValues()
Returns values which have been selected. $("#myselect2").selectedValues()
. Returns an array.
下载地址:jQuery Select Box SVN
- Jquery Plugin:Select box manipulation
- jquery 通过显示值 设定 select box
- jQuery DOM 操作 (Manipulation)
- JQuery DOM Manipulation
- jQuery如何选中select box中的某一项
- 自定义select-box
- jquery plugin
- jquery plugin
- jQuery - Manipulation操作 - insertAfter在之后插入
- jQuery 对话框 jQuery.plugin
- jQuery / jQuery mvc plugin
- set readonly to select box
- Jquery <select></select>
- Jquery,Select
- jquery select
- jquery select
- jquery select
- jquery select
- DPL,RPL,CPL特权级别
- Java 中文分词器
- ThreadLocal
- 作为一个成功的软件工程师需要必备哪些条件
- WIN2003无法上传较大的文件“Request 对象 错误 /’ASP 0104 : 80004005/’
- Jquery Plugin:Select box manipulation
- 还存在bug的坦克大战
- java 设计模式之一 适配器模式 adapter
- 获取当前进程ID
- SQL函数表值函数标量值函数的区别
- 选择 ARM处理器,ARM7还是Cortex-M3?
- css http://www.dreamdu.com/css/
- 播放所设置格式个音频文件,可播放MP3,asx,mpg,wav文件
- 关于正则表达式匹配任意字符(包括换行符)的写法