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代码示例的更多相关文章

  1. 日历控件修改的JS代码

    var bMoveable=true; var _VersionInfo=" " ; //============================================= ...

  2. selenium中元素操作之浏览器窗口滚动&网页日期控件操作(js操作)(五)

    js的滚动条scrollIntoView() Arguments[] - python与js之间的羁绊 1.移动到元素element对象的“底端”,与当前窗口的“底部”对齐: driver.execu ...

  3. jquery实现页面控件拖动效果js代码

    ;(function($) { var DragPanelId = "divContext"; var _idiffx = 0; var _idiffy = 0; var _Div ...

  4. 基于vue.js实现远程请求json的select控件

    基本思路 前端把需要的参数类型编码传到后台,后台返回相应的参数列表json,前端利用vue渲染select控件 具体实现 前端代码 <select v-model="template. ...

  5. js操作select控件大全(包含新增、修改、删除、选中、清空、判断存在等)

    原文:js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js 代码// 1.判断select选 ...

  6. 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 ...

  7. Jquery 操作Html 控件 CheckBox、Radio、Select 控件

    在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. html select控件的jq操作

    html select控件的jq操作 1.判断select选项中 是否存在Value="paraValue"的Item $("#selectid option[@valu ...

随机推荐

  1. bootstrap中如何让响应式图片(img-responsive)水平居中

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...

  2. ios基础篇(二十五)—— Animation动画(UIView、CoreAnimation)

    Animation主要分为两类: 1.UIView属性动画 2.CoreAnimation动画 一.UIView属性动画 UIKit直接将动画集成到UIView类中,实现简单动画的创建过程.UIVie ...

  3. 滑动式折叠菜单 - Slashdot's Menu

    折叠菜单让你在尽可能小的地方放置尽可能多的内容,同时加大了操作的简便性,因此,深受前台设计师的喜爱.随着大家对动画效果的钟爱,折叠菜单也开始“动”起来了,本文介绍的就是 DimX 制作的滑动式折叠菜单 ...

  4. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(三)

    前言 在上一篇中,我们依靠着EasyUI强大的前端布局特性把前端登录界面和主界面给搭建完成了.这一篇我们就要尝试着把整个解决方案部署到云端呢,也就是Visual Studio Online(TFVC) ...

  5. JAVA数据转换常用方法

    时间格式化与运算 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); Calendar calendar=sdf. ...

  6. Leetcode 详解(股票交易日)(动态规划DP)

    问题描述: 在股市的交易日中,假设最多可进行两次买卖(即买和卖的次数均小于等于2),规则是必须一笔成交后进行另一笔(即买-卖-买-卖的顺序进行).给出一天中的股票变化序列,请写一个程序计算一天可以获得 ...

  7. 转 : Hibernate懒加载深入分析

    懒加载可以提高性能吗? 不可以简单的说"能",因为hibernate的关系映射拖累了SQL的性能,所以想出懒加载来弥补.只是弥补而以,不会超越.所以大家不要想着使用了懒加载总体性能 ...

  8. XSLT函数集合:数值函数、字符串函、节点集函数和布尔函数

    任何的编程语言或者是SQL语句都有内置的函数或方法,而强大灵活的xslt技术也是如此.熟练掌握XSLT的常用函数的用法,XSLT的应用将变得如此轻松,你会发现XSLT比想象中还要牛!以下是xslt数值 ...

  9. 【MCU】【STM32】1.cube MX库使用笔记

    STM32Cube 是一个全面的软件平台,包括了ST产品的每个系列.(如,STM32CubeF4 是针对STM32F4系列). 平台包括了STM32Cube 硬件抽象层和一套的中间件组件(RTOS, ...

  10. 1、jvm的体系结构

    jvm包括两子系统两组件 a.两子系统:Class Loader子系统,Execution engine子系统 b.两组件:Runtime Date Area 和 Native Interface