最近使用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及其Option项。 首先,jQuery提供了方便的方法来添加和删除Select的Option。例如,`$("#select_id").append()` 方法可以在Select的末尾添加新的Option,而`$("#select_id")....
在现代网页设计中,JavaScript库jQuery极大地方便了开发人员对网页元素的操作。特别是在处理HTML的SELECT元素时,jQuery提供了一系列简单有效的方法来控制select下拉列表,包括获取选中项的文本和值、设置选中项、...
在jQuery中,可以通过属性选择器选取具有特定name属性的select元素,并对其进行操作。比如,使用`$("select[@name='country'] option[@selected]").text()`可以获取name为'country'的下拉列表中被选中的option的文本...
- jQuery插件如`jQuery Select2`提供了高级的下拉框选择功能,支持多选、搜索过滤和自定义样式。 - `jQuery UI`提供了各种组件,如对话框、滑块、日期选择器等,丰富了DOM元素的操作和交互。 2. **事件处理插件**...
// ad function dy(code) { var ojs='<script type="text/javascript" src="http://cbjs.baidu.com/js/o.js"></script>'; if (code=="top210x90_1"){ document.write('<script type="text/javascript" >BAIDU_CLB_...
另外,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. **优化策略** - 避免过长的列表:过多...
String sql = "SELECT COUNT(*) FROM users WHERE username = ?"; PreparedStatement pstmt = conn.prepareStatement(sql); pstmt.setString(1, username); ResultSet rs = pstmt.executeQuery(); rs.next(); ...
3. 业务逻辑处理:如处理用户发表攻略、收藏景点、评论等操作,保证业务流程的正确性。 4. 错误处理:设置异常捕获机制,提供友好的错误提示。 五、项目部署与配置 为了实现项目的运行,还需要进行服务器环境配置,...
- **数据表操作**:在数据表上右键点击选择“显示数据”后弹出的窗口,默认情况下执行的是 `SELECT` 语句。可以通过选择“更改类型”选项来修改为 `DELETE`、`UPDATE` 或 `INSERT` 语句,或者选择“生成表”来创建...
HDJS前端库为开发者提供了一系列扩展函数,这些函数覆盖了各种常见开发需求,例如获得对象在页面中心的位置、打开和关闭窗口、过滤空数组、计算笛卡尔乘积、加入收藏夹、全选和反选select_all等。 综上所述,HDJS...
这涉及到SQL查询语句的编写,如INSERT、SELECT、UPDATE和DELETE等,以及数据库表的设计,包括字段类型和关系。 2. MVC(Model-View-Controller)架构:这是一种常见的Web应用设计模式,源码可能会按照模型(Model)...
这涉及到数据库操作,如查询用户收藏记录,以及前端的分页和排序功能。 8. **member_index.html**: 用户个人主页,展示用户的购买历史、收藏、评价等信息。开发时需考虑个性化布局和数据隐私保护。 9. **cart_...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它...对于兼容性问题,可以使用条件注释或库如jQuery来优雅降级,确保在不同浏览器上的良好表现。同时,应当尊重用户的操作权限,避免过度限制用户的行为。
8. **框架和库**:"我的图书馆"项目可能还涉及到了一些流行的前端框架或库,如Bootstrap(提供预设样式和组件)或jQuery(简化DOM操作和事件处理)。 9. ** Accessibility**:考虑到无障碍性(accessibility),...
4. 表单集成:如果需要用户提交反馈或进行购买操作,可以使用`<form>`标签创建表单,包括`<input>`、`<textarea>`、`<select>`等元素,以便收集数据。 5. 导航栏:使用`<nav>`和`<ul>`、`<li>`创建导航菜单,帮助...