• Jquery操作select


         最近使用JQuery来编写前端js脚本,涉及到依据下拉框的值确定其他下拉框中数据项。需要实现对下拉框中候选项的添加删除等,使用js写的话简直会死人的。还好使用JQuery。以下是操作 下拉列表的常用功能:

    1.获取列表项中候选项的数目。

    2.获得选中项的索引值。

    3.获得当前选中项的值

    4.设定选择值

    5.设定选择项

    ...

      1 //得到select项的个数   
      2 jQuery.fn.size = function(){   
      3     return jQuery(this).get(0).options.length;   
      4 }   
      5 
      6 //获得选中项的索引   
      7 jQuery.fn.getSelectedIndex = function(){   
      8     return jQuery(this).get(0).selectedIndex;   
      9 }   
     10 
     11 //获得当前选中项的文本   
     12 jQuery.fn.getSelectedText = function(){   
     13     if(this.size() == 0return "下拉框中无选项";   
     14     else{   
     15         var index = this.getSelectedIndex();         
     16         return jQuery(this).get(0).options[index].text;   
     17     }   
     18 }   
     19 
     20 //获得当前选中项的值   
     21 jQuery.fn.getSelectedValue = function(){   
     22     if(this.size() == 0)    
     23         return "下拉框中无选中值";   
     24        
     25     else 
     26         return jQuery(this).val();   
     27 }   
     28 
     29 //设置select中值为value的项为选中   
     30 jQuery.fn.setSelectedValue = function(value){   
     31     jQuery(this).get(0).value = value;   
     32 }   
     33 
     34 //设置select中文本为text的第一项被选中   
     35 jQuery.fn.setSelectedText = function(text)   
     36 {   
     37     var isExist = false;   
     38     var count = this.size();   
     39     for(var i=0;i<count;i++)   
     40     {   
     41         if(jQuery(this).get(0).options[i].text == text)   
     42         {   
     43             jQuery(this).get(0).options[i].selected = true;   
     44             isExist = true;   
     45             break;   
     46         }   
     47     }   
     48     if(!isExist)   
     49     {   
     50         alert("下拉框中不存在该项");   
     51     }   
     52 }   
     53 //设置选中指定索引项   
     54 jQuery.fn.setSelectedIndex = function(index)   
     55 {   
     56     var count = this.size();       
     57     if(index >= count || index < 0)   
     58     {   
     59         alert("选中项索引超出范围");   
     60     }   
     61     else 
     62     {   
     63         jQuery(this).get(0).selectedIndex = index;   
     64     }   
     65 }   
     66 //判断select项中是否存在值为value的项   
     67 jQuery.fn.isExistItem = function(value)   
     68 {   
     69     var isExist = false;   
     70     var count = this.size();   
     71     for(var i=0;i<count;i++)   
     72     {   
     73         if(jQuery(this).get(0).options[i].value == value)   
     74         {   
     75             isExist = true;   
     76             break;   
     77         }   
     78     }   
     79     return isExist;   
     80 }   
     81 //向select中添加一项,显示内容为text,值为value,如果该项值已存在,则提示   
     82 jQuery.fn.addOption = function(text,value)   
     83 {   
     84     if(this.isExistItem(value))   
     85     {   
     86         alert("待添加项的值已存在");   
     87     }   
     88     else 
     89     {   
     90         jQuery(this).get(0).options.add(new Option(text,value));   
     91     }   
     92 }   
     93 //删除select中值为value的项,如果该项不存在,则提示   
     94 jQuery.fn.removeItem = function(value)   
     95 {       
     96     if(this.isExistItem(value))   
     97     {   
     98         var count = this.size();           
     99         for(var i=0;i<count;i++)   
    100         {   
    101             if(jQuery(this).get(0).options[i].value == value)   
    102             {   
    103                 jQuery(this).get(0).remove(i);   
    104                 break;   
    105             }   
    106         }           
    107     }   
    108     else 
    109     {   
    110         alert("待删除的项不存在!");   
    111     }   
    112 }   
    113 //删除select中指定索引的项   
    114 jQuery.fn.removeIndex = function(index)   
    115 {   
    116     var count = this.size();   
    117     if(index >= count || index < 0)   
    118     {   
    119         alert("待删除项索引超出范围");   
    120     }   
    121     else 
    122     {   
    123         jQuery(this).get(0).remove(index);   
    124     }   
    125 }   
    126 //删除select中选定的项   
    127 jQuery.fn.removeSelected = function()   
    128 {   
    129     var index = this.getSelectedIndex();   
    130     this.removeIndex(index);   
    131 }   
    132 //清除select中的所有项   
    133 jQuery.fn.clearAll = function()   
    134 {   
    135     jQuery(this).get(0).options.length = 0;   
    136 
  • 相关阅读:
    HDU 4069 Squiggly Sudoku
    SPOJ 1771 Yet Another NQueen Problem
    POJ 3469 Dual Core CPU
    CF 118E Bertown roads
    URAL 1664 Pipeline Transportation
    POJ 3076 Sudoku
    UVA 10330 Power Transmission
    HDU 1426 Sudoku Killer
    POJ 3074 Sudoku
    HDU 3315 My Brute
  • 原文地址:https://www.cnblogs.com/netwenchao/p/1551538.html
Copyright © 2020-2023  润新知