本文共 4977 字,大约阅读时间需要 16 分钟。
Jquery相当强大,但是在操作Select的时候,还是比较麻烦,不尽人意,近来在使用Jquery时发现一个问题,如果通过如下方式动态添加select 的option 由于不是以Dom方式添加到Doml树中,因此操作option会有些问题:
var htmlselect = ''; htmlselect = htmlselect+''; htmlselect = htmlselect+''; htmlselect = htmlselect+''; htmlselect = htmlselect+''; htmlselect = htmlselect+''; htmlselect = htmlselect+''; htmlselect = htmlselect+''; htmlselect = htmlselect+''; htmlselect = htmlselect+''; htmlselect = htmlselect+''; htmlselect = htmlselect+''; $("#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的部分说明
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
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
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);
.
Sorting is done as follows: $("#myselect2").sortOptions(false);
(descending) or $("#myselect2").sortOptions();
(ascending)
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.
You can copy options from one select to another: $("#myselect").copyOptions("#myselect2");
(copy selected options) or $("#myselect").copyOptions("#myselect2", "all");
(copy all options)
Checks if a select box has an option with the supplied value
Parameters
if( $("#myselect").containsOption("val1") ) { ... }
or if( $("#myselect").containsOption(/^val/i) ) { ... }
$("#myselect").containsOption("val1", copyoption).doSomethingElseWithSelect(); // calls copyoption (user defined function) for any options found, chain is continued
Returns values which have been selected. $("#myselect2").selectedValues()
. Returns an array.