/**
* 多选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;
}
}
}
分享到:
相关推荐
含checkbox的多选下拉组件,功能很强大。选中后鼠标移入有提示所有选项。更多组件下载请访问:http://www.quickui.net/
element ui select多选组件 标签根据数据属性显示颜色不同, 至于plugins
html多选下拉框 ,CheckBox的Select组件。可多选的下拉框。
可视化操控左右多选select的React组件
下拉框多选,3个积分意思一下 ,博文地址https://blog.csdn.net/qq_42909145/article/details/104756982
weui多选组件,weui多选组件,weui多选组件,weui多选组件,weui多选组件
原生select实现多选功能
JQ JS javascript 多选 多选下拉框 select bootstrap-select
boostrap下拉控件,支持选择多个下拉内容,并可搜索下拉内容
xmselect日期多选组件demo
select 下拉框可以多选Demo事列.
一款简单多选的select插件,简单易用,文件里包含demo,能设置默认值和获取已选中的value和text
select 实现多选
React多选组件 React多选组件 安装: npm install --save @khanacademy/react-multi-select yarn add @khanacademy/react-multi-select 用法: 有关如何使用该组件的信息,请参见/src/stories/index.js的示例,但...
jq+css实现的select多选下拉框美化
jQuery下拉复选菜单,可实现多选全选功能,并提供下拉框内实时搜索
vue-select 多选下拉列表,建议用火狐或者谷歌浏览器打开,低版本IE对vue兼容性不好
select模拟多选下拉,支持多选,支持AJAX传递数据,共通性
div 模拟 select 多选 实现还有点bug,望大家一起改正。