SELECT控件操作的JS代码示例
SELECT控件操作的JS代码示例
1 检测是否有选中
if(objSelect.selectedIndex > -1) {
//说明选中
} else {
//说明没有选中
}
2.动态创建select
function createSelect(){
var mySelect = document.createElement_x("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
3.添加选项option
function addOption(){
//根据id查找对象,
var obj=document.getElementByIdx('mySelect');
//添加一个选项
obj.add(new Option("文本","值"));
}
4.删除所有选项option
function removeAll(){
var obj=document.getElementByIdx('mySelect');
obj.options.length=0;
}
5.删除一个选项option
function removeOne(){
var obj=document.getElementByIdx('mySelect');
//index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}
6.获得选项option的值
var obj=document.getElementByIdx('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;
7.获得选项option的文本
var obj=document.getElementByIdx('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;
8.修改选项option
var obj=document.getElementByIdx('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");
9.删除select
function removeSelect(){
var mySelect = document.getElementByIdx("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
一、基础理解:
var e = document.getElementByIdx("selectId");
e.options = new Option("文本", "值"); //创建一个option对象
,即在标签中创建一个或多个。options是一个数组,里面可存放多个标签。
1、options数组的属性: length -------长度属性 selectedIndex ------ 当前被选中的文本的索引值,此索引值是内存自动分配的(0,1,2,3....)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值.......)
2、单个option的属性(即obj.options[obj.selectedIndex]是指定的某个
全选" onclick="choiceAll('left')"> 未选择
全选" onclick="choiceAll('right')">
<SELECTmultiple="multiple"[J1] style="width:200px" size="20" id="left" > 添加" onclick="move('left','right')" style="background: #deb887;">
删除>>" onclick="move('right','left')" style="background:#ffebcd;"> <SELECTmultiple="multiple" style="width:200px" size="20" id="right" >
SELECT控件操作的JS代码示例的更多相关文章
- 日历控件修改的JS代码
var bMoveable=true; var _VersionInfo=" " ; //============================================= ...
- selenium中元素操作之浏览器窗口滚动&网页日期控件操作(js操作)(五)
js的滚动条scrollIntoView() Arguments[] - python与js之间的羁绊 1.移动到元素element对象的“底端”,与当前窗口的“底部”对齐: driver.execu ...
- jquery实现页面控件拖动效果js代码
;(function($) { var DragPanelId = "divContext"; var _idiffx = 0; var _idiffy = 0; var _Div ...
- 基于vue.js实现远程请求json的select控件
基本思路 前端把需要的参数类型编码传到后台,后台返回相应的参数列表json,前端利用vue渲染select控件 具体实现 前端代码 <select v-model="template. ...
- js操作select控件大全(包含新增、修改、删除、选中、清空、判断存在等)
原文:js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js 代码// 1.判断select选 ...
- 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对这些控件的操作进行一 ...
- js+CSS实现模拟华丽的select控件下拉菜单效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html select控件的jq操作
html select控件的jq操作 1.判断select选项中 是否存在Value="paraValue"的Item $("#selectid option[@valu ...
随机推荐
- bootstrap中如何让响应式图片(img-responsive)水平居中
我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...
- ios基础篇(二十五)—— Animation动画(UIView、CoreAnimation)
Animation主要分为两类: 1.UIView属性动画 2.CoreAnimation动画 一.UIView属性动画 UIKit直接将动画集成到UIView类中,实现简单动画的创建过程.UIVie ...
- 滑动式折叠菜单 - Slashdot's Menu
折叠菜单让你在尽可能小的地方放置尽可能多的内容,同时加大了操作的简便性,因此,深受前台设计师的喜爱.随着大家对动画效果的钟爱,折叠菜单也开始“动”起来了,本文介绍的就是 DimX 制作的滑动式折叠菜单 ...
- EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(三)
前言 在上一篇中,我们依靠着EasyUI强大的前端布局特性把前端登录界面和主界面给搭建完成了.这一篇我们就要尝试着把整个解决方案部署到云端呢,也就是Visual Studio Online(TFVC) ...
- JAVA数据转换常用方法
时间格式化与运算 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); Calendar calendar=sdf. ...
- Leetcode 详解(股票交易日)(动态规划DP)
问题描述: 在股市的交易日中,假设最多可进行两次买卖(即买和卖的次数均小于等于2),规则是必须一笔成交后进行另一笔(即买-卖-买-卖的顺序进行).给出一天中的股票变化序列,请写一个程序计算一天可以获得 ...
- 转 : Hibernate懒加载深入分析
懒加载可以提高性能吗? 不可以简单的说"能",因为hibernate的关系映射拖累了SQL的性能,所以想出懒加载来弥补.只是弥补而以,不会超越.所以大家不要想着使用了懒加载总体性能 ...
- XSLT函数集合:数值函数、字符串函、节点集函数和布尔函数
任何的编程语言或者是SQL语句都有内置的函数或方法,而强大灵活的xslt技术也是如此.熟练掌握XSLT的常用函数的用法,XSLT的应用将变得如此轻松,你会发现XSLT比想象中还要牛!以下是xslt数值 ...
- 【MCU】【STM32】1.cube MX库使用笔记
STM32Cube 是一个全面的软件平台,包括了ST产品的每个系列.(如,STM32CubeF4 是针对STM32F4系列). 平台包括了STM32Cube 硬件抽象层和一套的中间件组件(RTOS, ...
- 1、jvm的体系结构
jvm包括两子系统两组件 a.两子系统:Class Loader子系统,Execution engine子系统 b.两组件:Runtime Date Area 和 Native Interface