JS对select控件option选项的增删改查示例代码

Javascript 操作select是表单中常见的一种,下面介绍几种常用的JS动态操作select中的各种方法：


代码如下:

//动态创建select
function createSelect()
{
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}

代码如下:

//添加选项option
function addOption()
{
//根据id查找对象，
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}

代码如下:

//删除所有选项option
function removeAll()
{
var obj=document.getElementById('mySelect');
obj.options.length=0;
}

代码如下:

//删除一个选项option
function removeOne()
{
var obj=document.getElementById('mySelect');
//index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}

代码如下:

//获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].text;

代码如下:

//修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");

赞 (0)

相关推荐

  • Node.js操作mysql数据库增删改查

    Node.js操作mysql数据库增删改查

    关于node.js操作mysql数据库的相关介绍请阅读全文吧.下文介绍的非常详细,具体内容如下所示:  安装mysql模块 npm install mysql 数据库准备 mysql server所在的机器IP地址是192.168.0.108,登录账户就用root@123456 在mysql中创建test数据库 在test数据库中创建一张users表 操作 连接数据库 var mysql=require('mysql'); var connection = mysql.createConnect

  • javascript操作xml(增删改查)例子代码hta版

    包括了stu.hta(是HTML应用程序);      stu.xml 注意下面的HTML代码必须保存为后缀名为hta否则当对XML文件进行操作(增删改)的时候就会提示没有权限!! 文件stu.hta代码如下: 复制代码 代码如下: <html> <head> <title> 数据岛的显示 </title> <style type="text/css"> #findPanel { position:absolute; widt

  • js 如何实现对数据库的增删改查

    JavaScript操作数据库JS操作Access数据库,跟其他语言操作差不多,总结了一下习惯代码,仅供参考学习. 现在在F盘有文件abc.mdf,表名为Student,一共2个字段,Id数字类型主键,stuName文本类型,现对该表进行增删改查的操作: 1.查询 复制代码 代码如下: <HTML> <HEAD> <TITLE>数据查询</TITLE> <Script > var conn = new ActiveXObject("AD

  • node.js操作mysql(增删改查)

    最近这段时间研究Node感觉不错,自己做了一个增删改查,虽然有些简陋,但是思想是想通的,其实所有项目都是增删改查,有助于初学者快速掌握Node  首先 本实例展示的是基于Node+Express+node-mysql快速搭建的一套增删改查,视图模板是jade,基本上都是现在能用的到的技术,市面上的实例也特别少,有用的又不新,所以自己写一个  基本工作 首先我们准备一些基本的,因为我是用mysql麻烦可以自己装一下mysql,去官网可以下各种操作系统的安装包. 实例就一张表,下面是这张表的建表语句

  • javascript Xml增删改查(IE下)操作实现代码

    html文件: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>j

  • javascript实现信息增删改查的方法

    本文实例讲述了javascript实现信息增删改查的方法.分享给大家供大家参考.具体实现方法如下: <body> <div align="center"> <h1>显示所有的用户界面</h1> <div style="border: 1px red solid; margin-bottom: 100px; padding: 10px 10%;"> <table border="1px&quo

  • JavaScript针对网页节点的增删改查用法实例

    JavaScript针对网页节点的增删改查用法实例

    本文实例讲述了JavaScript针对网页节点的增删改查用法.分享给大家供大家参考.具体分析如下: 一.基本概念 这部分也就是所谓的"HTML DOM",所谓HTML DOM也就是Web页面加载规则,是一个规则,也就是网页组成的基本公式. 也就是所有网页都必须按照:<html><body></body></html>--的规则编写,也按照这样的规则加载. 所谓的"网页节点",也叫"DOM节点"的通俗

  • AngularJS中如何使用$http对MongoLab数据表进行增删改查

    主页面: <button ng-click="loadCourse()">Load Course</button> <button ng-click="toggleAddCourse(true)">Add New Course</button> <ng-includce src="'course_list.html'"></ng-include> <ng-include

  • JS结合bootstrap实现基本的增删改查功能

    JS结合bootstrap实现基本的增删改查功能

    提出问题:如何利用原生的js实现基本的增删改查功能??? 解决问题 假如你已经对JS有一定基础 假如你对bootstrap有一定基础 下面是具体的例子, 包含两个文件(index.jsp  和  index.js) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC

  • javascript js 操作数组 增删改查的简单实现

    函数定义 Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; }; Array.prototype.remove = function(val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } }

随机推荐