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

我利用的是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. WCF发布错误及解决方案

    一:在本机直接运行时出错 使用WCF写了一个小程序测试一下它的功能在运行时报错.“添加服务失败.服务元数据可能无法访问.请确保服务正在运行并且正在公开元数据.” 如下图所示: 查了下资料把它解决了,记 ...

  2. 仿简书分享:UIActivityViewController系统原生分享

    接下来介绍UIActivityViewController: 1. 创建要分享的数据内容,加在一个数组 ActivityItems里. NSString *textToShare = @"我 ...

  3. Android:dialog去除边框的实现(自带Style的padding)

    public void show(View view) { MyDialog myDialog=new MyDialog(MainActivity.this); myDialog.show(); // ...

  4. Calendar时间类型数据设置

    Calendar calendar = Calendar.getInstance(); calendar.add(Calendar.DATE, -1); calendar.set(Calendar.H ...

  5. hbase checkandput

    HBaseEveryDay_Atomic_compare_and_set Updated Sep 29, 2011 by lurker.h...@gmail.com 基本概念 在HBase中Inser ...

  6. Ninja:Java全栈Web开发框架-Ninja中文网

    相信不少业界人士都还停留在SSh的时代 其实我想给大家推荐的一个轻量级框架那就是Ninja; Ninja是一个Java全栈Web开发框架,稳定.快速.非常高效. 商业价值 在你的下一个项目中,Ninj ...

  7. jQuery slideDown()--向下滑动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. git 第一次 push 遇到问题

    开始用 git 的时候我只会 git clone git pull git push 这三个命令满足了我的基本需求,到自己创建仓库的时候遇到了问题, git remote add origin htt ...

  9. 苹果4S

    港版.4S.白.非翻新机.16G.联通3G移动2G电信2G 1000 美版.4S.白.翻新.16G.联通3G移动2G电信3G 980

  10. Effective JavaScript :第六章

    1.将undefined看成没有值 产生undefined的情况: ①未赋值的变量的初始值为undefined. var x ; X ; //undefined ②访问对象中不存在的属性也会产生und ...