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
转载自:
项目地址:
分享到:
相关推荐
NULL 博文链接:https://wine-god.iteye.com/blog/1461056
Maven更新问题 今天Maven在更新的时候发现一直更新不成功,总结下解决方法。 在apache-maven-3.5.2/conf/setting.xml中加入以下配置即可解决 alimaven aliyun maven ... central junit junit Address/ ...
、CSS和JavaScript知识的开发者,内容覆盖了jQuery知识体系的全部内容,包括jQuery Core、jQuery Plugin 、jQuery UI、jQuery Mobile以及大量第三方的插件库和2800多个应用jQuery技术的网页参考。
此juqery插件模仿能输入的下拉框.能支持数组或JSON传值的创建,自动创建将原生下拉框转换为此能输入的下拉框模式,有搜索和自动完成功能,键盘鼠标方向键控制功能,能更改外部样式!
jquery 的经典 英文书 jQuery Plugin Development Beginner’s Guide.PDF
对齐 jQuery 插件Align 插件建立在函数的基础上,以对齐一个或多个元素在它们的偏移父元素上。用法 .align( options )options :传递给方法的附加选项的映射。 支持的键: 容器:要与之对齐的 DOM 对象。 默认 = 父...
这是一个用来显示树状结构的jQuery插件
jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html
表格拖拽排序插件 Table Drag and Drop JQuery plugin v0.7 最新0.7版本
jquery-plugin:开发Jquery插件的简单示例,
jQuery plugin for autocomplete - jQuery自动完成插件
jQuery Validation Plugin 为您现有的表单提供插入式验证,同时使各种自定义以适合您的应用程序非常容易。 这个 jQuery 插件使简单的客户端表单验证变得容易,同时仍然提供大量的自定义选项。 如果您要从头开始构建...
japicmp-gradle-plugin:JApicmp的Gradle插件
maven-clean-plugin:2.5:clean (default-clean) maven-resources-plugin:2.6:resources (default-resources) maven-compiler-plugin:3.1:compile (default-compile) maven-resources-plugin:2.6:testResources ...
jQuery Media Plugin Demo
主要介绍了Ubuntu18.04下解决Qt出现qt.qpa.plugin:Could not load the Qt platform plugin “xcb“问题,本文给大家分享解决方案,需要的朋友可以参考下
TutsPlus-jQuery-Plugin:Tuts +课程的源代码
eclipse maven plugin 插件 安装 和 配置
promptuMenu - jQuery Plugin
idea创建Maven项目时,报错显示Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.0.2:resources,并且Maven插件内看不到 mybatis-generator。如下图: 折腾了好久发现配置放错地方了,...