Jquery Plugin：Select box manipulation

吉嘉珍

2023-12-01

Jquery相当强大，但是在操作Select的时候，还是比较麻烦，不尽人意，近来在使用Jquery时发现一个问题，如果通过如下方式动态添加select 的option 由于不是以Dom方式添加到Doml树中，因此操作option会有些问题：

  var htmlselect = '<option selected=""selected"" value="""">请选择</option>';
                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 Plugin：Select box manipulation
通过使用jquery.selectboxes.js我们完全可以用Dom对象方式操作option了

$("#Select1").empty(); //建议调用，否则有些小问题。
                $("#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";

                }

jquery.selectboxes.js的部分说明

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") ) { ... } or if( $("#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

转载自：

http://hi.baidu.com/freezesoul/blog/item/0a5a7c3ec8509b3970cf6ccf.html

项目地址：

http://www.koders.com/javascript/fidA57BA4050B6644FE42BA0666CAC80F314DA07E3D.aspx?s=xmlhttprequest