Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)
1
判断select选项中 是否存在Value="paraValue"的Item
2
向select选项中 加入一个Item
3
从select选项中 删除一个Item
4
删除select中选中的项
5
修改select选项中 value="paraValue"的text为"paraText"
6
设置select中text="paraText"的第一个Item为选中
7
设置select中value="paraValue"的Item为选中
8
得到select的当前选中项的value
9
得到select的当前选中项的text
10
得到select的当前选中项的Index
11
清空select的项
js 代码
// 1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("该Item的Value值已经存在");
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功加入");
}
}
// 3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
} else {
alert("该select中 不存在该项");
}
}
// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}
// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("该select中 不存在该项");
}
}
// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
//判断是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if (isExit) {
alert("成功选中");
} else {
alert("该select中 不存在该项");
}
}
// 7.设置select中value="paraValue"的Item为选中
document.all.objSelect.value = objItemValue;
// 8.得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value;
// 9.得到select的当前选中项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
// 10.得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex;
// 11.清空select的项
document.all.objSelect.options.length = 0;
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)的更多相关文章
- 转 JavaScript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)
收藏一下 1.判断select选项中 是否存在Value=”paraValue”的Item2.向select选项中 加入一个Item3.从select选项中 删除一个Item4.删除select中选中 ...
- js操作select控件大全(包含新增、修改、删除、选中、清空、判断存在等)
原文:js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js 代码// 1.判断select选 ...
- jQuery操作select控件取值和设值
1.级联select的操作,后一个select的值随着前一个select选中值变化 $(".select_A").change(function(){ $(".selec ...
- Jquery获取select 控件的change事件时选中的值
HTML代码如下: <div class="col-sm-9 col-xs-12"> <select id="groupid" class=& ...
- JavaScript封装一个实用的select控件
最近一直把精力放在项目上面,导致忽略的一些底层的东西.以前就一直觉得原有的select控件很丑,正好周末有时间,试着做了一个简单封装,实现了它的基本功能.我总结了一下,大概分为三个部分: 1.对显示样 ...
- SELECT控件操作的JS代码示例
SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...
- Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html
Jquery 操作Html 控件 CheckBox.Radio.Select 控件 在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...
- Jquery 操作Html 控件 CheckBox、Radio、Select 控件
在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...
- html select控件的jq操作
html select控件的jq操作 1.判断select选项中 是否存在Value="paraValue"的Item $("#selectid option[@valu ...
随机推荐
- 基于库zkclient 的leader选举代码实现
利用了zookeeper临时节点,在当连接或session断掉时被删除这一特性来做选举.(简单简单互斥锁) 查了下网上的做法. 大致流程: <1>判定是否存在/wzgtest路径 < ...
- session绑定javaBean
1.HttpSessionBindingListener 这个监听器,可以让javaBean对象,感知它被绑定到session中或从session中移除.2.HttpSessionActivati ...
- python环境准备
一.环境准备. 1.安装python3.5.2(勾选环境变量),python2.7.12 2.设置环境变量 (要求命令行输入python,进入python2命令行,打python3时,进入python ...
- Spring.Net+NHibernate+asp.net mvc + easyui
毕业4个月的入手项目..前段时间在公司一直做的维护..为了弄明白自己也就跟着写了一个,目前也正在学习:不对的或者是有更好的还请各位赐教. 在学习的过程中主要参考::http://www.cnblogs ...
- HTML基础语句
一,网页基础结构: 1 <html> 2 <head> 3 <title>我的第一个网页</title> 4 </head> 5 <b ...
- node.js的ejs模版引擎
ejs版本是0.8.8,生成的views目录下面只有index.ejs and error.ejs,没有layout.ejs. D:\lianchuangfile\nodeDevelop\microb ...
- java学习第一阶段——面向对象
你聪明有人会说你心机重, 你靠的是努力有人会说你运气好, 你说自己天生乐观有人会说你虚假, 有时候, 你明明就是一杯白水, 却被人硬生生逼成了满肚子憋屈的碳酸饮料. 人一生要遇见太多人, 即使有些话字 ...
- 一个PHP开发者总结的九条建议
本文只是个人从实际开发经验中总结的一些东西,并不是什么名言警句,写出来有两个目的:一是时刻提醒自己要按照这些知识点来写自己代码,二是为了分享,说不定对你有用呢?万一,是吧... 1.首要意识:安全 大 ...
- MySQL 删除数据库
MySQL 删除数据库 使用 mysqladmin 删除数据库 使用普通用户登陆mysql服务器,你可能需要特定的权限来创建或者删除 MySQL 数据库. 所以我们这边使用root用户登录,root用 ...
- jdbc中的Statement对象和Preparedstatement对象的区别,以及通过jdbc操作调用存储过程
一. java.sql.* 和 javax.sql.*的包的类结构 |- Driver接口: 表示java驱动程序接口.所有的具体的数据库厂商要来实现此接口. |- connect(url, p ...