JS操作select标签

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

我利用的是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

时间: 2024-12-28 16:39:11

JS操作select标签的相关文章

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

原文:js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js 代码// 1.判断select选项中 是否存在Value="paraValue"的Item        function jsSelectIsExitItem(objSelect, objItemValue) {            var isExit = false;            for (var i

js 操作select和option

js 操作select和option 1.动态创建select function createSelect(){ var mySelect = document.createElement_x("select");          mySelect.id = "mySelect";           document.body.appendChild(mySelect);      } 2.添加选项option function addOption(){ //根

js获取select标签选中的值及文本

原生js方式: var obj = document.getElementByIdx_x("testSelect"); //定位id var index = obj.selectedIndex; // 选中索引 var text = obj.options[index].text; // 选中文本 var value = obj.options[index].value; // 选中值 jquery方式: 第一种方式$('#testSelect option:selected').te

Js操作Select大全

判断select选项中 是否存在Value="paraValue"的Item 向select选项中 加入一个Item 从select选项中 删除一个Item 删除select中选中的项 修改select选项中 value="paraValue"的text为"paraText" 设置select中text="paraText"的第一个Item为选中 设置select中value="paraValue"的Ite

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

jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[tex

Jquery操作select标签的常用方法

<select id="search"> <option value='1'>baidu</option> <option value='2'>sogou</option> </select> 1.清空select标签下的option标签 (1)  $("#search").html(""); (2)  $("#search").find(“option”

杂项一之js,&lt;select&gt;标签

一.在aspx页面中实现 修改与删除页面的跳转 前台js部分: 在上部的js部分中写,根据传过来的id,来经行页面的跳转,并把id传过去 js部分就是实现了一个页面跳转的功能 (还有确认框confirm("")) <script type="text/javascript"> function Update(id) { window.location = "/0828/Article/UpDateArticle.aspx?id=" +

js获取select标签选中的值

var obj = document.getElementByIdx_x("testSelect"); //定位id var index = obj.selectedIndex; // 选中索引 var text = obj.options[index].text; // 选中文本 var value = obj.options[index].value; // 选中值 jQuery中获得选中select值 第一种方式$('#testSelect option:selected').t

jQuery系列之操作select标签

每次看完东西基本就忘了,现在决定写一下博客来记录,不知道效果咋样. 一.jQuery操作选择器 1.基本选择器 关于基本选择器,我就不用太多说了,包括了ID.类.标签等选择器. 2.层次选择器 我觉得掌握层次选择器需要了解dom元素的树形结构,这样你才能准确的抓住你想要操作的dom元素. 下面介绍一下层次选择器: a. $("ancestor descendant"),表示选取ancestor元素中的所有descendant元素,ancestor表示上代的一起,descendant表示