Javascript、jQuery 操作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的项
转存失败重新上传取消// 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;
Jquery操作select
1.获取列表项中候选项的数目。
2.获得选中项的索引值。
3.获得当前选中项的值
4.设定选择值
5.设定选择项
...
jQuery.fn.size = function(){
return jQuery(this).get(0).options.length;
}
//获得选中项的索引
jQuery.fn.getSelectedIndex = function(){
return jQuery(this).get(0).selectedIndex;
}
//获得当前选中项的文本
jQuery.fn.getSelectedText = function(){
if(this.size() == 0) return "下拉框中无选项";
else{
var index = this.getSelectedIndex();
return jQuery(this).get(0).options[index].text;
}
}
//获得当前选中项的值
jQuery.fn.getSelectedValue = function(){
if(this.size() == 0)
return "下拉框中无选中值";
else
return jQuery(this).val();
}
//设置select中值为value的项为选中
jQuery.fn.setSelectedValue = function(value){
jQuery(this).get(0).value = value;
}
//设置select中文本为text的第一项被选中
jQuery.fn.setSelectedText = function(text)
{
var isExist = false;
var count = this.size();
for(var i=0;i<count;i++)
{
if(jQuery(this).get(0).options[i].text == text)
{
jQuery(this).get(0).options[i].selected = true;
isExist = true;
break;
}
}
if(!isExist)
{
alert("下拉框中不存在该项");
}
}
//设置选中指定索引项
jQuery.fn.setSelectedIndex = function(index)
{
var count = this.size();
if(index >= count || index < 0)
{
alert("选中项索引超出范围");
}
else
{
jQuery(this).get(0).selectedIndex = index;
}
}
//判断select项中是否存在值为value的项
jQuery.fn.isExistItem = function(value)
{
var isExist = false;
var count = this.size();
for(var i=0;i<count;i++)
{
if(jQuery(this).get(0).options[i].value == value)
{
isExist = true;
break;
}
}
return isExist;
}
//向select中添加一项,显示内容为text,值为value,如果该项值已存在,则提示
jQuery.fn.addOption = function(text,value)
{
if(this.isExistItem(value))
{
alert("待添加项的值已存在");
}
else
{
jQuery(this).get(0).options.add(new Option(text,value));
}
}
//删除select中值为value的项,如果该项不存在,则提示
jQuery.fn.removeItem = function(value)
{
if(this.isExistItem(value))
{
var count = this.size();
for(var i=0;i<count;i++)
{
if(jQuery(this).get(0).options[i].value == value)
{
jQuery(this).get(0).remove(i);
break;
}
}
}
else
{
alert("待删除的项不存在!");
}
}
//删除select中指定索引的项
jQuery.fn.removeIndex = function(index)
{
var count = this.size();
if(index >= count || index < 0)
{
alert("待删除项索引超出范围");
}
else
{
jQuery(this).get(0).remove(index);
}
}
//删除select中选定的项
jQuery.fn.removeSelected = function()
{
var index = this.getSelectedIndex();
this.removeIndex(index);
}
//清除select中的所有项
jQuery.fn.clearAll = function()
{
jQuery(this).get(0).options.length = 0;
}
---------------------------------------------------------
<script type="text/javascript">
$(document).ready(function(){
//添加“江苏”到下拉框的最后一位
$('#add_to_last').click(function(){
$('#select').append('<OPTION value="江苏">江苏</OPTION>');
});
//添加“安徽”到下拉框的第一位
$('#add_to_first').click(function(){
$('#select').prepend('<OPTION value="安徽">安徽</OPTION>');
});
//获取当前的selectIndex(当前选中的下拉菜单的项目的索引)
$('#get_select_index').click(function(){
alert($('#select option:selected').attr("index"));
});
//移除下拉菜单最后一个项目
$('#remove_last_option').click(function(){
$('#select option:last').remove();
});
//移除除了第一个之外的所有选项
$('#remove_all_option_except_first').click(function(){
$('#select option').not(':first').remove();
});
//获取下拉菜单最大索引值
$('#get_max_index').click(function(){
var maxIndex=$("#select option:last").attr("index");
alert(maxIndex);
});
});
</script>
<SELECT id="select" style="width:100px"> <OPTION selected>中国省份</OPTION></SELECT> <p/>
<button id="add_to_last">添加江苏到最后一位</button><br/>
<button id="add_to_first">添加安徽到第一位</button><br/>
<button id="get_select_index">获取当前的selectIndex</button><br/>
<button id="remove_last_option">移除下拉菜单最后一个项目</button><br/>
<button id="remove_all_option_except_first">移除除了第一个之外的所有选项</button><br/>
<button id="get_max_index">获取下拉菜单最大索引值</button><br/>
Javascript、jQuery 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)(转)...相关推荐
- 转 JavaScript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)...
收藏一下 1.判断select选项中 是否存在Value="paraValue"的Item 2.向select选项中 加入一个Item 3.从select选项中 删除一个Item ...
- Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)...
1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除selec ...
- jQuery操作select控件取值和设值
1.级联select的操作,后一个select的值随着前一个select选中值变化 $(".select_A").change(function(){$(".select ...
- Jquery获取select 控件的change事件时选中的值
HTML代码如下: <div class="col-sm-9 col-xs-12"><select id="groupid" class=&q ...
- JavaScript操作select控件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- jQuery操作Select2控件
Select2控件 将普通的select控件,转换为select2控件,通过select2()方法 将某个select控件,转换为select2 $('#selectId').select2({wid ...
- Jquery操作对控件的取值、赋值
TEXTBOX: var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框,文本区域: $(" ...
- jquery 操作服务端控件,select 控件
<asp:DropDownList ID="ddl" runat="server"></asp:DropDownList> <se ...
- JavaScript 操作 COM 控件
目标:用JavaScript 脚本代码调用COM控件,实现基本功能操作: 1.定义及初始化COM控件: 2.调用COM接口: 3.注册COM事件并实现事件调用. 1. 定义及初始化COM控件 ...
- javascript,jquery 操作 dropdownlist ,select
大家都知道,.NET中一些Web服务器控件解析并编译,最终被渲染的时候,其实是转化成了普通的html控件. 比如<asp:LinkButton>控件就被渲染成了<a>锚点控件, ...
最新文章
- BootStrap的下载及使用方法
- 解决SwipeRefreshLayout与Banner滑动冲突
- Python成长之路【第七篇】:Python基础之装饰器
- java属于面相_[Java教程]面相对象
- (王道408考研数据结构)第七章查找-第一节:查找的基本概念、平均查找长度
- Unix——学习《Unix环境高级编程》找不到“apue.h”方法
- 台积电5nm来了!谁会是第一个吃螃蟹的人
- linux c++ 函数效率,Linux C++程序进行性能分析工具gprof使用入门
- 第27课 数组的本质分析
- openCV之中值滤波均值滤波(及代码实现)
- 使用CSS制作图片相框以及图片放大旋转效果
- 【EXLIBRIS】#小词旮旯# 001 Lock
- 2018 Android 框架汇总(转)
- 【美港探案】百度Q2:需要重新定义
- STL全特化 偏特化 成员特化
- 【眼见为实】数据库并发问题 封锁协议 隔离级别
- 企业管理者谦虚_为什么谦虚是优秀开发者最重要的特征
- Linux环境安装python3报错:“HTTP Error 416 Requested Range Not Satisfiable 正在尝试其它镜像”的解决方法
- 服务器过关稳定靠谱有利于网站的运行
- 税收完税证明模板图片_税收完税证明模板下载_税收完税证明模板设计素材