`
wangyijiangshui
  • 浏览: 85476 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类

多选select组件 涉及的所有常用操作

 
阅读更多

/**
 * 多选Select组件涉及的所有常用操作(如果你需要源代码,请下载附件;如有不足,请指正)
 *
 * @Author JiangShui
 *
 * @Date 2010-10-19
 */
 
/**
 * 判断select选项中是否存在指定值的Item 
 *
 * @param objSelectId 将要验证的目标select组件的id
 * @param objItemValue 将要验证是否存在的值
 */
function isSelectItemExit(objSelectId,objItemValue)  { 
 var objSelect = document.getElementById(objSelectId);
    var isExit = false; 
    if (null != objSelect && typeof(objSelect) != "undefined") {
     for(var i=0;i<objSelect.options.length;i++) { 
         if(objSelect.options[i].value == objItemValue) { 
             isExit = true; 
             break; 
         } 
     } 
    }
    return isExit;
 }
 
/**
 * 向select选项中加入一个Item 
 *
 * @param  objSelectId 将要加入item的目标select组件的id
 * @param objItemText 将要加入的item显示的内容
 * @param objItemValue 将要加入的item的值
 */
function addOneItemToSelect(objSelectId,objItemText,objItemValue) { 
 var objSelect = document.getElementById(objSelectId);
    if (null != objSelect && typeof(objSelect) != "undefined") {
      //判断是否该值的item已经在select中存在
     if(isSelectItemExit(objSelectId,objItemValue)) { 
         $.messager.alert('提示消息','该值的选项已经存在!','info');
     }  else  {
         var varItem = new Option(objItemText,objItemValue); 
         objSelect.options.add(varItem); 
     } 
    }
}

 

/**
 * 从select选项中删除选中的项,支持多选多删
 *
 * @param objSelectId 将要进行删除的目标select组件id
 */
function removeSelectItemsFromSelect(objSelectId) { 
 var objSelect = document.getElementById(objSelectId);
 var delNum = 0;
     if (null != objSelect && typeof(objSelect) != "undefined") {
        for(var i=0;i<objSelect.options.length;i=i+1) { 
            if(objSelect.options[i].selected) { 
                objSelect.options.remove(i); 
                delNum = delNum + 1;
                i = i - 1;
            } 
        }        
     if (delNum <= 0 ) {
      $.messager.alert('提示消息','请选择你要删除的选项!','info');
     } else {
      $.messager.alert('提示消息','成功删除了'+delNum+'个选项!','info');
     }
     }
}
 
/**
 * 从select选项中按指定的值删除一个Item  
 *
 * @param objSelectId 将要验证的目标select组件的id
 * @param objItemValue 将要验证是否存在的值
 */
function removeItemFromSelectByItemValue(objSelectId,objItemValue) { 
 var objSelect = document.getElementById(objSelectId);
     if (null != objSelect && typeof(objSelect) != "undefined") {
      //判断是否存在
       if(isSelectItemExit(objSelect,objItemValue)) { 
         for(var i=0;i<objSelect.options.length;i++) { 
             if(objSelect.options[i].value == objItemValue) { 
                 objSelect.options.remove(i); 
                 break; 
             } 
         }        
         $.messager.alert('提示消息','成功删除!','info');            
     } else { 
         $.messager.alert('提示消息','不存在指定值的选项!','info'); 
     }    
     }
}

 

/**
 * 清空select中的所有选项
 *
 * @param objSelectId 将要进行清空的目标select组件id
 */
function clearSelect(objSelectId) { 
 var objSelect = document.getElementById(objSelectId);
     if (null != objSelect && typeof(objSelect) != "undefined") {
        for(var i=0;i<objSelect.options.length;) { 
          objSelect.options.remove(i); 
        }        
     }
}

 

/**
 * 获取select中的所有item,并且组装所有的值为一个字符串,值与值之间用逗号隔开
 *
 * @param objSelectId 目标select组件id
 * @return select中所有item的值,值与值之间用逗号隔开
 */
function getAllItemValuesByString(objSelectId) {
 var selectItemsValuesStr = "";
 var objSelect = document.getElementById(objSelectId);
 if (null != objSelect && typeof(objSelect) != "undefined") {
      var length = objSelect.options.length
        for(var i = 0; i < length; i = i + 1) { 
         if (0 == i) {
            selectItemsValuesStr = objSelect.options[i].value;
         } else {
            selectItemsValuesStr = selectItemsValuesStr + "," + objSelect.options[i].value;
         }
        }  
     } 
     return selectItemsValuesStr;
}

 

/**
 * 将一个select中的所有选中的选项移到另一个select中去
 *
 * @param fromObjSelectId  移动item的原select组件id
 * @param toObjectSelectId  移动item将要进入的目标select组件id
 */
function moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { 
 var objSelect = document.getElementById(fromObjSelectId);
 var delNum = 0;
     if (null != objSelect && typeof(objSelect) != "undefined") {
        for(var i=0;i<objSelect.options.length;i=i+1) { 
            if(objSelect.options[i].selected) { 
                addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value)
                objSelect.options.remove(i);
                i = i - 1;
            }
        }        
     }
}

 

/**
 * 将一个select中的所有选项移到另一个select中去
 *
 * @param fromObjSelectId  移动item的原select组件id
 * @param toObjectSelectId  移动item将要进入的目标select组件id
 */
function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { 
 var objSelect = document.getElementById(fromObjSelectId);
     if (null != objSelect) {
      for(var i=0;i<objSelect.options.length;i=i+1) { 
             addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value)
             objSelect.options.remove(i);
             i = i - 1;
        }  
     }
}

分享到:
评论

相关推荐

    select 下拉框可以多选

    当我们需要让用户从一组选项中选择一个或多个项目时,`select`下拉框是常用的选择方式。在某些场景下,我们可能需要使`select`下拉框支持多选,即用户可以同时勾选多个选项。这就是"select下拉框可以多选"这个主题所...

    select_div_css_js.rar_css _select_下拉多选

    在网页设计中,选择框(Select)是一种常用的交互元素,用于让用户从一组预定义的选项中进行选择。然而,HTML的原生`&lt;select&gt;`标签往往功能有限,尤其是在需要实现多选或者自定义样式时。这里,我们关注的是一个名为...

    JS多选下拉

    - **Vue-Select**:Vue生态中的多选下拉组件,具有可配置性,易于集成到Vue项目中。 - **Ant Design Select**:React生态中的组件,源自阿里巴巴的Ant Design UI库,提供多种模式的下拉选择,包括多选。 ### 优化...

    不按CTRL键实现多选

    标题“不按CTRL键实现多选”涉及到的是在计算机用户界面设计中的一种特殊选择机制,通常在文件管理器、网页表单或者应用界面等场景下使用。这种机制允许用户在不按下Ctrl键的情况下,通过点击来选取多个项目,提高了...

    ext多选下拉框(代码及例子)

    在EXTJS中, Combo(组合框)是一个常用的组件,它可以作为单选或多选的下拉框使用。本示例将详细讲解EXTJS中实现多选下拉框的代码及实践。 在"ext多选下拉框(代码及例子)"这个主题中,主要涉及到的知识点有: 1....

    bootstrap-select2-ztree.zip

    Bootstrap、Select2 和 ZTree 是三个在Web开发中常用的库,它们分别提供了不同的功能,而将它们整合在一起可以实现更复杂的交互式用户界面。这里我们将深入探讨这些库以及如何将它们结合来创建一个下拉框带树结构的...

    Extjs4下拉多选扩展

    总结,ExtJS 4下拉多选扩展涉及到组件继承、配置项设置、Store管理、模板和渲染、事件处理以及API扩展等多个方面。通过这些知识点,开发者可以构建出功能丰富的多选下拉框,满足各种复杂场景的需求。在实践中,不断...

    高仿微信图库多选单选

    4. **依赖库v7**:在Android开发中,`appcompat-v7`库是常用的兼容库,它提供了对低版本Android的支持,包含了大量的UI组件和工具类。 实现这一功能,我们通常会使用第三方库,例如这里的`multi-image-selector`。...

    select级联下拉列表

    例如,`jquery-mult-select`可能就是一个这样的插件,它可以提供多选、分组、搜索等功能,使得下拉菜单更加灵活和易用。 总结来说,"select级联下拉列表"是网页表单中一种常用的功能,通过JavaScript和HTML5的`...

    Jquery 模拟 select

    当涉及到用户界面的交互元素,如下拉选择框(select),jQuery提供了丰富的插件来实现更美观、功能更强大的模拟效果。本文将详细探讨如何使用jQuery模拟select,并介绍两个流行的插件:Select2和Chosen。 首先,...

    双选框 两个<select>标签组成 高效代码清晰

    在IT领域,尤其是在Web开发中,`&lt;select&gt;`标签是一个常用元素,用于创建下拉菜单,让用户在一组预设选项中进行选择。本项目中,我们看到一个创新的应用,即通过两个`&lt;select&gt;`标签来实现类似“双选框”的功能,这在...

    multi-select:用于多选 https 的 Shim 存储库

    标题中的“multi-select”指的是一个专门用于实现多选功能的用户界面组件,它与HTTPS的Shim存储库相结合,提供了一种在Web应用中处理多选下拉列表或复选框的方法。Shim通常是在不支持某些新特性的老旧浏览器中,通过...

    Ext combobox 下拉多选框带搜索功能

    5. **事件处理**:添加适当的事件监听器,例如`select`事件,以便在用户选择或取消选择选项时执行相应的操作。 6. **优化性能**:对于大型数据集,可能需要使用分页或懒加载来提高性能,避免一次性加载所有数据。 ...

    力软敏捷框架前端API1

    以上知识点涵盖了力软敏捷框架前端开发中常用的一些组件和功能,开发者可以通过这些API有效地进行界面交互和数据处理,提高开发效率。在实际使用时,开发者需要参考官方文档来获取更详细的API说明和示例,以便更好地...

    带复选框的多级目录树,复选框的选择控制子节点父节点 全选和反选

    复选框是用户界面中常用的一种控件,它允许用户在多个选项中进行多选。在HTML中,`&lt;input type="checkbox"&gt;`元素用来创建一个复选框,用户可以勾选或取消勾选,通常配合`&lt;label&gt;`元素来提供描述文本。在JavaScript...

    自定义GridView控件

    在.NET框架中,GridView是一种常用的Web控件,用于展示数据并允许用户进行交互。自定义GridView控件是为了满足更复杂的业务需求,例如分页和多选功能,这在标准GridView控件中可能需要额外的配置或扩展才能实现。在...

    bootstrap-下拉选择树.zip

    Bootstrap 下拉选择树是一种在网页设计中常用的交互组件,它结合了Bootstrap的下拉菜单功能与树形结构,使得用户可以在一个下拉列表中选择层级化的数据。这种组件在需要展示多级分类或者层级关系时非常有用,比如...

    bootstrap下拉框动态赋值方法

    其中,Bootstrap下拉框是一种常用组件,允许用户从一系列选项中选择一个或多个选项。在前端开发中,经常需要从服务器端动态获取数据,并更新下拉框的选项,这就涉及到动态赋值的技术。 在介绍动态赋值方法之前,...

Global site tag (gtag.js) - Google Analytics