zoukankan      html  css  js  c++  java
  • jquery操作select2控件

      (一)select2常用的操作:添加、移除、获取选中的value()与text()

      (1)移除事件:$("#select_id").unbind("change");   //为Select移除选择改变事件

      unbind的用法:

        ①定义和用法

        unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。

        ubind() 适用于任何通过 jQuery 附加的事件处理程序。

        ②取消绑定元素的事件处理程序和函数

        规定从指定元素上删除的一个或多个事件处理程序。如果没有规定参数,unbind() 方法会删除指定元素所有事件处理程序

        语法:$(selector).unbind(event,function)     

        示例如下:

    $("p").click(function(){
        $(this).slideToggle();
    });
    $("button").click(function(){
        $("p").unbind();    //取消元素‘p’的所有应用程序
    });

        ③使用 Event 对象来取消绑定事件处理程序

        规定要删除的事件对象。用于对自身内部的事件取消绑定(比如当事件已被触发一定次数之后,删除事件处理程序)。

        如果未规定参数,则 unbind() 方法会删除指定元素的所有事件处理程序。

        语法:$(selector).unbind(eventObj)     示例如下:

      var x=0;
      $("p").click(function(e){
        $("p").animate({fontSize:"+=5px"});  //动态改变p标签中字体是属性
        x++;
        if (x>=2)
        {
          $(this).unbind(e);  //this指点击的当前事件,此处用于取消点击事件
        }
      })

      (2)添加事件

      $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发;也可以说select_id值发生改变触发该事件

      示例:

    //jsp
    <select id="druge" class="form-control input-sm" >
    </select>
    //js
    $("#druge").change(function(){        
      var drugData = $(this).val();    //获取当前事件标签的值
      alert("aaaaaaa");
    })

      (3) 获取选中项的相关属性:

       $("#select_id").find("option:selected").text();  //获取Select选择的text()

       $("#select_id").val();  //获取Select选择的Value()

       $("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值

      (4) JQuery获取select控件中特定的节点:

      $("#select_id option:first").attr("index");  //获取Select最小的索引值

      $("#select_id option:last").attr("index");  //获取Select最大的索引值

      (5)JQuery设置Select控件选中的项(也就是为select赋初始值):

      $("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中

      $("#select_id ").val(4);   // 设置Select的Value值为4的项选中

      $("#select_id option[text='内容]").attr("selected", true);   //设置Select的Text值为jQuery的项选中

      (6) JQuery添加/删除Select的Option项:

      $("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项),其中value,text是初始化的值

      $("#select_id").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置)

      $("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)

      $("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个)

      $("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option

      $("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option 

      (二)禁用属性

        可以设置禁用状态disabled,并且设置非常简单,如:$("#select_id").prop("disabled", false);

      (三)赋初始值(默认值设置)

    //单选情况
    <select class="form-control input-sm" id="job" ></select>

      (1)单选情况:$("#select2").val("初始值").trigger("change");

    //多选情况,其中需要加入多选属性multiple="multiple"
    <select class="form-control input-sm" id="job" multiple="multiple" ></select>

      (2)多选选情况:$("#select2").val(["1","2"]).trigger("change");  这样传递数组过去。

      示例:

        var jobs=jobId.split(","); //转换为数组,说明:"a,b,c,".split(",")结果为:['a','b','c'];可以发现,自动将结尾的空置去除,这与java中类似

        $("#job").val(jobs).trigger("change");   //这里的jobs传入的一定要是数组

      (四)重点:如何将数据中的数据取出,作为select2的option?

        详细请见下节

  • 相关阅读:
    聚会
    Wannafly summer camp Day2
    HDU6627 equation
    2019牛客暑期多校D.Big Integer
    对主席树的理解以及使用
    2019牛客暑期多校训练营(第四场)C.sequence(单调栈+线段树)
    2019 Multi-University Training Contest 1
    浅谈序列自动机
    2019江西省程序设计竞赛
    拉格朗日插值的应用
  • 原文地址:https://www.cnblogs.com/lojun/p/6974169.html
Copyright © 2011-2022 走看看