zoukankan      html  css  js  c++  java
  • 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 
  • 相关阅读:
    网络卖家自曝黑幕 “信用刷手”欺骗你 狼人:
    卡巴斯基:2009年恶意软件发展情况将持续恶化 狼人:
    微软证实云计算平台暂时中断 显现安全弊端 狼人:
    工程目录Maven安装配置及其插件m2e(Eclipse Indigo 和 MyEclipse8.5)的安装配置
    文件系统crondsendmailpostdrop导致Linux定期死掉的完整解决过程实录
    汇编语言处理器面向机器的编程语言 : 汇编语言:如果自己要发明一种编程语言,那么需要做些什么事情呢?
    包解密腾讯手机管家ROOT功能分析
    nullnullhdu 2608
    按钮下载Eclipse Color Theme
    控件学习IOS开源项目(1)之RatingView星级评论控件学习
  • 原文地址:https://www.cnblogs.com/netwenchao/p/1551538.html
Copyright © 2011-2022 走看看