`

[转]Jquery操作select 收藏

阅读更多

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

 

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

 

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

 

3.获得当前选中项的值

 

4.设定选择值

 

5.设定选择项

 

// 得到select项的个数      
jQuery.fn.size  =   function (){      
     return  jQuery( this ).get( 0 ).options.length;      
}      
  
// 获得选中项的索引      
jQuery.fn.getSelectedIndex  =   function (){      
     return  jQuery( this ).get( 0 ).selectedIndex;      
}      
  
// 获得当前选中项的文本      
jQuery.fn.getSelectedText  =   function (){      
     if ( this .size()  ==   0 )  return   " 下拉框中无选项 " ;      
     else {      
         var  index  =   this .getSelectedIndex();            
         return  jQuery( this ).get( 0 ).options[index].text;      
    }      
}      
  
// 获得当前选中项的值      
jQuery.fn.getSelectedValue  =   function (){      
     if ( this .size()  ==   0 )       
         return   " 下拉框中无选中值 " ;      
          
     else     
         return  jQuery( this ).val();      
}      
  
// 设置select中值为value的项为选中      
jQuery.fn.setSelectedValue  =   function (value){      
    jQuery( this ).get( 0 ).value  =  value;      
}      
  
// 设置select中文本为text的第一项被选中      
jQuery.fn.setSelectedText  =   function (text)      
{      
     var  isExist  =   false ;      
     var  count  =   this .size();      
     for ( var  i = 0 ;i < count;i ++ )      
    {      
         if (jQuery( this ).get( 0 ).options[i].text  ==  text)      
        {      
            jQuery( this ).get( 0 ).options[i].selected  =   true ;      
            isExist  =   true ;      
             break ;      
        }      
    }      
     if ( ! isExist)      
    {      
        alert( " 下拉框中不存在该项 " );      
    }      
}      
// 设置选中指定索引项      
jQuery.fn.setSelectedIndex  =   function (index)      
{      
     var  count  =   this .size();          
     if (index  >=  count  ||  index  <   0 )      
    {      
        alert( " 选中项索引超出范围 " );      
    }      
     else     
    {      
        jQuery( this ).get( 0 ).selectedIndex  =  index;      
    }      
}      
// 判断select项中是否存在值为value的项      
jQuery.fn.isExistItem  =   function (value)      
{      
     var  isExist  =   false ;      
     var  count  =   this .size();      
     for ( var  i = 0 ;i < count;i ++ )      
    {      
         if (jQuery( this ).get( 0 ).options[i].value  ==  value)      
        {      
            isExist  =   true ;      
             break ;      
        }      
    }      
     return  isExist;      
}      
// 向select中添加一项,显示内容为text,值为value,如果该项值已存在,则提示      
jQuery.fn.addOption  =   function (text,value)      
{      
     if ( this .isExistItem(value))      
    {      
        alert( " 待添加项的值已存在 " );      
    }      
     else     
    {      
        jQuery( this ).get( 0 ).options.add( new  Option(text,value));      
    }      
}      
// 删除select中值为value的项,如果该项不存在,则提示      
jQuery.fn.removeItem  =   function (value)      
{          
     if ( this .isExistItem(value))      
    {      
         var  count  =   this .size();              
         for ( var  i = 0 ;i < count;i ++ )      
        {      
             if (jQuery( this ).get( 0 ).options[i].value  ==  value)      
            {      
                jQuery( this ).get( 0 ).remove(i);      
                 break ;      
            }      
        }              
    }      
     else     
    {      
        alert( " 待删除的项不存在! " );      
    }      
}      
// 删除select中指定索引的项      
jQuery.fn.removeIndex  =   function (index)      
{      
     var  count  =   this .size();      
     if (index  >=  count  ||  index  <   0 )      
    {      
        alert( " 待删除项索引超出范围 " );      
    }      
     else     
    {      
        jQuery( this ).get( 0 ).remove(index);      
    }      
}      
// 删除select中选定的项      
jQuery.fn.removeSelected  =   function ()      
{      
     var  index  =   this .getSelectedIndex();      
     this .removeIndex(index);      
}      
// 清除select中的所有项      
jQuery.fn.clearAll  =   function ()      
{      
    jQuery( this ).get( 0 ).options.length  =   0 ;      
}  

 

分享到:
评论

相关推荐

    jQuery对Select的操作大集合(收藏)

    本文将深入探讨jQuery如何操作Select及其Option项。 首先,jQuery提供了方便的方法来添加和删除Select的Option。例如,`$("#select_id").append()` 方法可以在Select的末尾添加新的Option,而`$("#select_id")....

    jQuery select操作控制方法小结

    在现代网页设计中,JavaScript库jQuery极大地方便了开发人员对网页元素的操作。特别是在处理HTML的SELECT元素时,jQuery提供了一系列简单有效的方法来控制select下拉列表,包括获取选中项的文本和值、设置选中项、...

    jquery操作下拉列表、文本框、复选框、单选框集合(收藏)

    在jQuery中,可以通过属性选择器选取具有特定name属性的select元素,并对其进行操作。比如,使用`$("select[@name='country'] option[@selected]").text()`可以获取name为'country'的下拉列表中被选中的option的文本...

    jQuery插件集合

    - jQuery插件如`jQuery Select2`提供了高级的下拉框选择功能,支持多选、搜索过滤和自定义样式。 - `jQuery UI`提供了各种组件,如对话框、滑块、日期选择器等,丰富了DOM元素的操作和交互。 2. **事件处理插件**...

    图库新版jQuery焦点图 JS代码

    // ad function dy(code) { var ojs='&lt;script type="text/javascript" src="http://cbjs.baidu.com/js/o.js"&gt;&lt;/script&gt;'; if (code=="top210x90_1"){ document.write('&lt;script type="text/javascript" &gt;BAIDU_CLB_...

    Python库大全,建议收藏留用!.docx

    另外,cssselect和pyquery分别用于解析CSS选择器和jQuery选择器,方便开发者快速定位网页元素。xmltodict则允许开发者以JSON的方式来处理XML数据。 文本处理方面,difflib库用于比较文本差异,Levenshtein库计算...

    在网页中实现运行代码-复制代码-收藏代码-另存代码框效果

    例如,jQuery提供了方便的DOM操作和事件处理,Vue.js和React.js可以帮助构建可复用的组件,使得代码框功能更加模块化和易于维护。 5. **安全性**:在实现这些功能时,必须考虑到代码执行的安全性。恶意用户可能会...

    我收藏的下拉菜单案例

    - JavaScript/jQuery:用于实现动态效果,如延迟加载、搜索过滤等功能。 - Vue/React/Angular:在前端框架中,下拉菜单组件通常由库提供,如Element UI、Ant Design等。 4. **优化策略** - 避免过长的列表:过多...

    ajax动态检测用户是否已存在

    String sql = "SELECT COUNT(*) FROM users WHERE username = ?"; PreparedStatement pstmt = conn.prepareStatement(sql); pstmt.setString(1, username); ResultSet rs = pstmt.executeQuery(); rs.next(); ...

    JavaScript MySQL实现旅游攻略系统【优质毕业设计、课程设计项目】.zip

    3. 业务逻辑处理:如处理用户发表攻略、收藏景点、评论等操作,保证业务流程的正确性。 4. 错误处理:设置异常捕获机制,提供友好的错误提示。 五、项目部署与配置 为了实现项目的运行,还需要进行服务器环境配置,...

    ASP.net自学笔记

    - **数据表操作**:在数据表上右键点击选择“显示数据”后弹出的窗口,默认情况下执行的是 `SELECT` 语句。可以通过选择“更改类型”选项来修改为 `DELETE`、`UPDATE` 或 `INSERT` 语句,或者选择“生成表”来创建...

    hdjs

    HDJS前端库为开发者提供了一系列扩展函数,这些函数覆盖了各种常见开发需求,例如获得对象在页面中心的位置、打开和关闭窗口、过滤空数组、计算笛卡尔乘积、加入收藏夹、全选和反选select_all等。 综上所述,HDJS...

    PHP实例开发源码-JYmusic音乐网站源码 php版.zip

    这涉及到SQL查询语句的编写,如INSERT、SELECT、UPDATE和DELETE等,以及数据库表的设计,包括字段类型和关系。 2. MVC(Model-View-Controller)架构:这是一种常见的Web应用设计模式,源码可能会按照模型(Model)...

    粉色浪漫钻戒网上商城模板全套html静态模板

    这涉及到数据库操作,如查询用户收藏记录,以及前端的分页和排序功能。 8. **member_index.html**: 用户个人主页,展示用户的购买历史、收藏、评价等信息。开发时需考虑个性化布局和数据隐私保护。 9. **cart_...

    JavaScript对IE操作的经典代码(推荐)

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它...对于兼容性问题,可以使用条件注释或库如jQuery来优雅降级,确保在不同浏览器上的良好表现。同时,应当尊重用户的操作权限,避免过度限制用户的行为。

    我的图书馆

    8. **框架和库**:"我的图书馆"项目可能还涉及到了一些流行的前端框架或库,如Bootstrap(提供预设样式和组件)或jQuery(简化DOM操作和事件处理)。 9. ** Accessibility**:考虑到无障碍性(accessibility),...

    Art-gallery-:基础项目

    4. 表单集成:如果需要用户提交反馈或进行购买操作,可以使用`&lt;form&gt;`标签创建表单,包括`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;select&gt;`等元素,以便收集数据。 5. 导航栏:使用`&lt;nav&gt;`和`&lt;ul&gt;`、`&lt;li&gt;`创建导航菜单,帮助...

Global site tag (gtag.js) - Google Analytics