zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    你眼中的程序员 VS 程序员眼中的自己,是时候打破代沟了
    GaussDB(for openGauss)让数据“存得下、算得快、算得准”
    初识GaussDB(for Cassandra)
    云原生势不可挡,华为云GaussDB加速企业数字化转型
    HDC.Cloud2021|开发者们都在谈的云原生到底长什么样?
    基于深度神经网络的噪声标签学习
    华为云PB级数据库GaussDB(for Redis)揭秘第七期:高斯Redis与强一致
    Delphi 窗体函数GetActiveWindow
    Delphi 窗体函数GetWindowText -获取窗口的标题
    深度学习数据预处理
  • 原文地址:https://www.cnblogs.com/linkstar/p/5240158.html
Copyright © 2011-2022 走看看