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;

赞 (0)

相关推荐

  • Javascript Select操作大集合

    Javascript Select操作大集合

    其实这本书一直都在我的电脑里,只是没认真看过.一直没怎么很正式的学习过javascript,偶尔用到的时候就到网上找些代码,改吧改吧就用了,这次从头开始学起,细细看下来,还真是有不少收获,甚至有点喜欢上javascript了. 现在步入正题,看到书中讲Form元素的操作,像Textbox.Button.Label等,都还是比较简单的,只是看到Select时,稍微有些复杂,于是就想仔细研究研究,于是就有了这篇文章.Select的操作包括动态添加.删除.移动.获取选中项的值.排序等等,现在一一讲述.

  • javascript操作select元素实例分析

    本文实例讲述了javascript操作select元素的用法.分享给大家供大家参考.具体分析如下: 这里熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮. 当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重新恢复它们. 当按下submit时关闭窗口本身,代码如下: <!DOCTYPE html> <html> <head> <title>duang for se

  • javascript对下拉列表框(select)的操作实例讲解

    这篇文章,主要是关于javascript和select相关的最基本方法,以供不熟悉javascript的人参考.常见的情况是,提出表单结构的人, 不仅仅需要为程序设计逻辑,创建数据结构,还需要设计表单的样式,以及熟悉javascript:某些公司可能会要求您精通photoshop:最初的时候,我们都是全才. 下面是我们例子的基础:这不是一个标准的表单. <form id="f"> <select size="1" name="s"

  • javascript 操作select下拉列表框的一点小经验

    按照我一贯的web开发风格,所有不直接操作数据库的事件,都尽可能由javascript来实现,所以这个需求我打算使用js来完成. 首先来分析一下具体情况:这个页面是一个更新页面,品牌有品牌1和品牌2两个字段,品牌2可以为空,品牌1不能为空,所以品牌2的下拉列表框比品牌1多一项:如果选择了品牌的前8相中的任意一项,"活跃状态"要隐藏,否则"活跃状态"默认显示状态为"潜在":当查询的结果品牌1和品牌2有任意一项在品牌的前8相中,"活跃状态&

  • Javascript select下拉框操作常用方法

    复制代码 代码如下: function AddDropDownList(id,fatherCtl) { if(!document.getElementById(id)) { var ddl = document.createElement('select'); ddl.setAttribute("id",id); if(fatherCtl&&document.getElementById(fatherCtl)) document.getElementById(fathe

  • JavaScript关于select的相关操作说明

    一. 插入option 1.DOM方法 var oSelectYear = document.getElementById("SelectYear"); var op = document.createElement("option"); op.innerHTML = "2010"; op.value = "2010"; oSelectYear.appendChild(op); 2.new Option方法 var oSele

  • Javascript操作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;

  • javascript Select标记中options操作方法集合

    javascript操作Select标记中options集合 先来看看options集合的这几个方法: options.add(option)方法向集合里添加一项option对象: options.remove(index)方法移除options集合中的指定项: options(index)或options.item(index)可以通过索引获取options集合的指定项: javascript代码如下: var selectTag = null; //select标记 var OPTONLEN

  • 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&qu

  • javascript select控件间内容互相移动

    Insert title here function add(){ var opt=selectfrom.options; len=opt.length; for(i=len-1;i>-1;i--){ if(opt[i].selected){ select2.appendChild(opt[i]); } } } function addAll(){ var opt=selectfrom.options; len=opt.length; for(i=len-1;i>-1;i--){ select

  • Javascript操作select控件代码实例

    这篇文章主要介绍了Javascript操作select控件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 新增.修改.删除.选中.清空.判断存在等 1.判断select选项中 是否存在Value="paraValue"的Item function jsselectisexititem(objselect,objitemvalue) { var isexit = false; for(var i=0;i<objselect

  • js+CSS实现模拟华丽的select控件下拉菜单效果

    js+CSS实现模拟华丽的select控件下拉菜单效果

    本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下:

  • JavaScript在控件上添加倒计时功能的实现代码

    JavaScript在控件上添加倒计时功能的实现代码

    一.概述 在有些 报表 需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个报表在每天10点后才能查询 当倒计时结束的时候,查询功能可用 这种功能如何实现的呢 二.实现思路 主要原理是利用控件的setEnable(true)/setEnable(false)来进行设置控件的可用与不可用状态,在获取时间的过程中,需要利用到JS中的获取时间,利用JS的定时器函数setInt

  • GridView控件实现数据的修改（第9节）

    GridView控件实现数据的修改（第9节）

    上一篇是使用GridView控件实现数据的显示和删除,这一节设计页面,使用GridView控件实现数据的更新操作,当更新时新闻的内容没有输入则提示"不能为空". 学习内容: 学习任务一 使用GridView控件实现信息的更新 步骤一:数据源控件定义数据的方法,在newschuli.cs页面中编写代码如下: public static void modifynews(newsclass news1) { using (SqlConnection cn = dbconn.GetConnec

  • 轻松使用jQuery双向select控件Bootstrap Dual Listbox

    轻松使用jQuery双向select控件Bootstrap Dual Listbox

    本文主要为大家介绍了双向select控件Bootstrap Dual Listbox的使用方法,Bootstrap Dual列表是一个为响应Twitter优化的列表框插件,它可以用在所有的现代浏览器和触摸设备上,分享给大家,具体如下: 效果图: 一.使用 1.引用css和js文件 <link href="scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" /> <

  • 模仿combox(select)控件，不用为美化select烦恼了。

    不用整天为美化select控件烦恼了. 1.可批量美化select控件. 2.可以有onchange句柄. 3.触发onchange的函数可带参数. 3.可以得到select的值. 4.可设置像select类似的滚动条(如大于或等于8个数目时出现滚动条) 5.可设置宽度和高度 API参考: //首先生成一个simulateSelect的实例 //构造函数的第一个可选参数为触发onchange的函数,其它的为onchange函数的参数: c = new simulateSelect(s1oncha

  • HTML的select控件美化

    HTML的select控件美化

    CSS: .div-select { border: solid 1px #999; height: 40px; line-height: 40px; cursor: default; } .div-select-text { float: left; background-color: #fff; height: 100%; word-break: keep-all; overflow: hidden; cursor: default; } .div-select-text > div { p

  • 浅析Bootstrip的select控件绑定数据的问题

    此问题让我倒弄了一下午时间,最后终于被我拿下.下面小编把我的功劳分享出来,以此来做个备份,同时也希望能帮助到大家. 具体详情如下所示: $(function(){ var stu_no = freeUrl(); var data, subname="",data2; var sbList = new Array(); $.ajax({ async: false , dataType: "json", contentType: "application/js

随机推荐