主要利用这个来实现省市区三级联动的

我利用的是ajax,每一次onchange事件都改变相对应的select中的option,数据全是ajax请求服务器查询数据库而来的,效果还可以,在本地测试的时候速度还是可以的,用户基本体会不到带来的轻微卡顿,还有种方式是把数据直接写在本地的js中作为数组存放起来,但是我的数据已经在数据库中,所以这种方式被我否定了,但是我认为这种方式运行速度应该比我的快。

下面是JS操作select的几种用法,常用的我就记录一下。

1.动态创建select

function createSelect(){

var mySelect = document.createElement_x("select");
          mySelect.id = "mySelect"; 
          document.body.appendChild(mySelect);
      }

2.添加选项option

function addOption(){

//根据id查找对象,
           var obj=document.getElementByIdx_x('mySelect');

//添加一个选项
obj.add(new Option("文本","值"));    //这个只能在IE中有效
         obj.options.add(new Option("text","value")); //这个兼容IE与firefox
     }

3.删除所有选项option

function removeAll(){
           var obj=document.getElementByIdx_x('mySelect');
obj.options.length=0;

}

4.删除一个选项option

function removeOne(){
           var obj=document.getElementByIdx_x('mySelect');

//index,要删除选项的序号,这里取当前选中选项的序号

var index=obj.selectedIndex;
obj.options.remove(index);
     }

5.获得选项option的值

var obj=document.getElementByIdx_x('mySelect');

var index=obj.selectedIndex; //序号,取当前选中选项的序号

var val = obj.options[index].value;

6.获得选项option的文本

var obj=document.getElementByIdx_x('mySelect');

var index=obj.selectedIndex; //序号,取当前选中选项的序号

var val = obj.options[index].text;

7.修改选项option

var obj=document.getElementByIdx_x('mySelect');

var index=obj.selectedIndex; //序号,取当前选中选项的序号

var val = obj.options[index]=new Option("新文本","新值");

8.删除select

function removeSelect(){
            var mySelect = document.getElementByIdx_x("mySelect");
mySelect.parentNode.removeChild(mySelect);
     }

部分转载自:http://www.cnblogs.com/dchly/archive/2012/11/07/2759250.html

JS操作select标签的更多相关文章

  1. js 操作select和option

    js 操作select和option 1.动态创建select function createSelect(){ var mySelect = document.createElement_x(&qu ...

  2. Js操作Select大全(取值、设置选中)

    Js操作Select是很常见的,也是比较实用的. jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<s ...

  3. Js操作Select

    jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selecto ...

  4. Js操作Select大全(取值、设置选中等等)

    jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selecto ...

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

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

  6. JS实现列表移动(通过DOM操作select标签)

    JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现 select 标签的移动 实现代码 <!DOCTYPE html PUBLIC "-//W3C/ ...

  7. 杂项一之js,<select>标签

    一.在aspx页面中实现 修改与删除页面的跳转 前台js部分: 在上部的js部分中写,根据传过来的id,来经行页面的跳转,并把id传过去 js部分就是实现了一个页面跳转的功能 (还有确认框confir ...

  8. Jquery操作select标签的常用方法

    <select id="search"> <option value='1'>baidu</option> <option value=' ...

  9. js获取select标签选中的值[转]

    var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIndex; // 选中索引 va ...

随机推荐

  1. 子字符查找KMP算法 - 子串自匹配索引表

    public static int[] kmpTable(char[] seq) { int[] tbl = new int[seq.length]; tbl[0] = 1; for (int i = ...

  2. dotnet的移除-->安装 升级

    之所以要升级dotnet 是因为项目中报了如下错误 意思就是版本低了 为了升级 我先要把之前的移除掉(用脚本移除) #!/usr/bin/env bash # # Copyright (c) .NET ...

  3. JavaScript DOM编程艺术-学习笔记(第二章)

    1.好习惯从末尾加分号:开始 2.js区分大小写 3.程序界万能的命名法则:①不以,数字开头的数字.字母.下划线.美元符号 ②提倡以下划线命名法来命名变量,以驼峰命名法来命名函数.但是到了公司往往会身 ...

  4. python基础---pymsql

    pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同. 一.下载安装 pip3 install pymysql 二.使用 1.执行SQL #!/usr/bin/env ...

  5. python的模块!

    以下是对模块的理解,和总结 <1>模块是什么 模块是这样用的 import os 这就是导入了os模块 这和c语言里的#include<stdio.h>导入方式是一样的 导入了 ...

  6. Restaurant & Cooking Starter Kit v1.2.1

    项目: using UnityEngine; using System.Collections; namespace VoidGame { public class Constant : MonoBe ...

  7. Linux下Crontab的格式及含义

    crontab的基本格式: f1 f2 f3 f4 f5 command 分 时     日 月 周 命令 第一列f1代表分钟1~59:当f1为*表示每分钟都要执行:为*/n表示每n分钟执行一次:为a ...

  8. OSGI.NET,请求因HTTP状态404 失败:Not Found

    在VS里使用OSGI.NET可以正常运行项目和插件,开放工厂远程管理工具也可以使用,没有任何异常.可是,当我把项目部署到IIS上,网站可以正常运行,插件也正常:使用开放工厂远程管理工具时,就出现&qu ...

  9. 在Pythonanywhere上部署Django

    1 在github上创建一个仓库blog 2 克隆到本地,添加Django项目,再推送到github 3 克隆到pythonanywhere,以后每次更新用git pull即可 4 在pythonan ...

  10. 关于安装第三方模块和PILLOW

    看廖雪峰老师这一节的教程卡在这里挺久了 在谷歌上了搜了很久,最后根据这个教程上解决了这个问题 http://www.yihaomen.com/article/python/566.htm 觉得自己好蠢 ...