Select下拉列表框进行多选、移除、交换内容(包括修改反显)

最新推荐文章于 2024-05-16 10:57:40 发布
最新推荐文章于 2024-05-16 10:57:40 发布
阅读量820 收藏 1
点赞数
分类专栏： js 文章标签： Select下拉列表框进行多选、移除、交换内容 Select下拉列表框进行多选修改反显
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37567381/article/details/84518243
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Select下拉列表框进行多选、移除、交换内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body style="font-size:12px">
<form name="form1" method="post" action="">
<table width="380" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="150">
<table width="150" border="0" cellpadding="1" cellspacing="1" bgcolor="#CAFAFC">
<tr>
<td height="25" background="/electbg.jpg" bgcolor="#FFFFFF">　　　请选择：</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">
<select name="sel_place1" size="6" multiple id="sel_place1" style="width:100px " >
<option value="sel1">江苏省</option>
<option value="sel2">广东省</option>
<option value="sel3">河南省</option>
<option value="sel4">吉林省</option>
<option value="sel5">浙江省</option>
</select>
</td>
</tr>
</table></td>
<td width="80" align="center" valign="bottom">
<input name="sure1" type="button" id="sure1" onClick="allsel(document.form1.sel_place2,document.form1.sel_place1);" value="<<">  
<input name="sure2" type="button" id="sure2" onClick="allsel(document.form1.sel_place1,document.form1.sel_place2);" value=">>" align="center" height="2">
</td>
<td width="150">
<table width="150" border="0" cellpadding="1" cellspacing="1" bgcolor="#CAFAFC">
<tr>
<td height="25" background="/selectbg.jpg" bgcolor="#FFFFFF">　　　已选择：</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">
<select name="sel_place2" size="6" multiple id="sel_place2" style="width:100px "> </select>
</td>
</tr>
</table></td>
</tr>
</table>
</br></br>
<center>
<input type="button" id="btn1" onClick="submitForm();" value="提交">
</center>
</form>
<script language="javascript">
function allsel(n1,n2)
{
while(n1.selectedIndex!=-1)
{
var indx=n1.selectedIndex;
var t=n1.options[indx].text;
var v=n1.options[indx].value;
n2.options.add(new Option(t,v));
n1.remove(indx);
}
}
//提交存值
function submitForm(){
n2 = document.form1.sel_place2;
n2_len= n2.options.length;
var n2_val='';
for(i=0;i<n2_len;i++){
n2_val+=n2.options[i].value;
if(i!=n2_len-1){
n2_val+='|';
}
}
alert(n2_val);//存值：例如：
}

//初始化反显 dfzhao
window.onload = function() {
n1 = document.form1.sel_place1;
n2 = document.form1.sel_place2;
init_val='sel1|sel5|sel3';
init_arra=init_val.split("|");
for (var i=0;i<init_arra.length ;i++ ) {
for(var x=0; x<n1.options.length ;x++){
if(init_arra[i]==n1.options[x].value){
n2.options.add(new Option(n1.options[x].text,n1.options[x].value));
n1.remove(x);
}
}
}
}

</script>

</body>
</html>
qq_37567381
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
10-27
我们经常会看到很多的网站会看到有下拉列表的内容进行直接增加与移除，下面我来介绍一款js Select下拉列表框进行多选、移除、交换内容实例
js 多选框里的元素拖动排序
lixiwoaini的博客
05-16 1646
一、需求背景： 项目要求在多选的情况下对已选择的值进行手动拖动排序 二、设计分析： 我们正常的js插件中没有此功能，需要拖动里面的元素，就需要添加在生成的已选择的li元素里添加h5属性（draggable="true"），这样我们才能有拖动元素的这个效果。然后我们在select初始化的页面再监听拖动事件。除了核心的拖动外，我们还需要...
删除select列表中选中的多个值
weoln的专栏
06-23 1805
下面的代码实现删除select列表中同时删除选中的多个值。 New Document //删除选择项function deleteSelected(){ var s = document.getElementById("categoryList"); var length = s.length;
element select下拉框编辑时回显已经删除的数据
最新发布
qq_37004501的博客
05-16 249
【代码】element select下拉框编辑时回显已经删除的数据。
element ui Cascader select多选传值及反显
qq_41820599的博客
03-18 3516
传值 后台需要接受的参数是数组格式 但是 Cascader点击事件返回的参数是id名的数组，无法获取label值，所以需要获取节点this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels,就可以获取到。 需要做出的效果图是这样的，所以我还需要获取层级字符串。我们二三级表单是通过动态加载获取的 获取到的this.$refs.cascaderAddr.getCheckedNodes()其中path和 pathLabels分别对应id和名字，我需要将键值对
el-select下拉框多选远程搜索反显
gaoyu007的博客
07-22 1976
el-select下拉框多选远程搜索反显
select2下拉框多选进行回显
qq_42565099的博客
09-14 8289
多选框进行回显   val() 里面放的是从后台传来的id集合。 $("#manageDistrict").val(${manageRegionIdList}).trigger("change");
SelectBox下拉复选框多选插件
06-24
在IT领域，尤其是在前端开发中，"SelectBox下拉复选框多选插件"是一种常用的用户界面元素，用于提供用户友好的多选项选择功能。它结合了传统的下拉列表和复选框的特性，使得在有限的空间内，用户能够方便地筛选和...
vue-select 多选下拉列表
09-11
vue-select 多选下拉列表，建议用火狐或者谷歌浏览器打开，低版本IE对vue兼容性不好
select多选下拉列表+模糊查询功能.rar
03-11
select多选下拉列表+模糊查询功能，亲测完整，有ASP和HTML样例，代码完整。 <!DOCTYPE html> <title>Insert title here</title> <script src="jquery.min.js"></script> ...
bootstrap-select下拉选择搜索框，可以多选和单选
10-19
总之，Bootstrap Select是一个强大的下拉选择组件，它结合了Bootstrap的风格和实用功能，适用于创建具有搜索、多选功能的下拉列表，对于提高用户在网页上的操作效率具有显著作用。通过以上介绍，你应该已经对如何...
select2控件回显方法
09-12
JavaScript 技术： select2控件选择多个数据，以及回显数据的方法 。
element select多选不能回显、select多选回显之后不能正常编辑
u013868665的博客
05-20 1743
选中数据回显时，上面没有显示回显的名称，但是下面会有选中，并且点击选中的数据也无法取消选中、无法选择别的数据。 select多选用String格式接的字符串，保存后发现是带‘[]‘的数据，问题就出现在这里，也就是多选的数据传到后台后是数组形式，如果用string格式数据保存，需要对数据进行处理。将格式改为 Set<String>后（或其他需要的类型），刷新页面，发现数据回显成功 特此记录！ ..
select下拉框多选 和回显
weixin_34106122的博客
11-27 1961
<select multiple="true" name="cogCondition" style="width:100%;"> <c:forEach var="mate" items="${fns:getDictList('rdqk')}"> ...
select2多选下拉选回显的问题
一边努力一边摸鱼
06-18 6190
公司要求是要做一个多选下拉选 , 也是自己第一次用select2这个插件 , 以前用的是layui现在用bootstrap真的是头疼,被layui宠坏了 因为没有直接按照官方的做法来,导致增加了自己的很多问题吧,但是也增进了一些自己js的能力 问题是这样的,正常显示的值应该是这样的, 可是每次刷新的时候值都会变化,我也是服了 后来通过debug发现,后台取到的值是正确的,是因为我前端的js写的...
select多选下拉框 移动端_js Select下拉列表框进行多选、移除、交换内容的具体实现方法...
weixin_29793001的博客
12-30 408
html4/loose.dtd"><html>Select下拉列表框进行多选、移除、交换内容html; charset=gb2312">　　　请选择：江苏省广东省河南省吉林省浙江省onClick="allsel(document.form1.sel_place2,document.form1.sel_place1);" value="<onClick="allsel(...
Element Select选择器绑定对象，多选，回显处理
热门推荐
crazybai0001的博客
10-28 1万+
有些时候Select选择器需要多选、绑定对象，用户选择某项后（change事件），得到的值是一个对象，得到对象后可以获取对象的某些属性，以便做进一步处理，数据提交入库后，进行编辑操作，此时根据需求可能还需要正确定回显之前新建时选择的多个列表项，本文对些功能实现做简单整理、解释。
LayUI多选FormSelects，并实现数据回显
lovoo的博客
04-26 3632
1、前言 链接：https://fly.layui.com/extend/formSelects/ 基于 layui 的 select 多选解决方案。支持：多选、分组、取值&赋值、选择监听、搜索、启用&禁用、多选皮肤、重复选、下拉方向、显示数量、选择数、 远程搜索、动态数据、动态创建、 搜索过滤 、快捷操作、选项模板 、多级联动等。 但根据目前FormSelects官方提供的文档，并没有说明编辑时数据如何回显，于是我花了一天的时间进行不断的尝试，终于成功了。 首先在表中建supplierNa
select multiple 多选 移除
chinarenzhou
04-01 3670
select multiple 多选  移除此代码通过实例验证select,multiplefunction addOrRomove(method){ var s1 = document.getElementById("select"); var s2 = document.getElementById("selected"); var ids; var names; var option
select下拉列表动态数据多选 使用xm-select
08-15
要实现下拉列表的多选功能，并使用 xm-select 插件进行操作，可以按照以下步骤进行： 1. 引入必要的依赖文件。在 HTML 页面中引入 jQuery 和 xm-select 的 CSS 和 JavaScript 文件。 ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/xm-select/2.4.1/xm-select.css"> <script src="https://cdn.bootcdn.net/ajax/libs/xm-select/2.4.1/xm-select.js"></script> ``` 2. 创建一个 `<select>` 元素，并为其添加一个唯一的 id。 ```html <select id="mySelect" multiple> <!-- 动态生成的选项将在这里插入 --> </select> ``` 3. 使用 JavaScript 动态生成选项，并初始化 xm-select 插件。 ```javascript // 获取需要插入选项的 select 元素 var selectElement = document.getElementById("mySelect"); // 定义动态生成的选项数据 var options = [ { name: "选项1", value: "option1" }, { name: "选项2", value: "option2" }, { name: "选项3", value: "option3" }, // 其他选项... ]; // 动态生成选项 options.forEach(function (option) { var optionElement = document.createElement("option"); optionElement.text = option.name; optionElement.value = option.value; selectElement.appendChild(optionElement); }); // 初始化 xm-select 插件 xmSelect.render({ el: '#mySelect', tips: '请选择选项', }); ``` 通过以上步骤，就可以实现使用 xm-select 插件实现下拉列表的动态数据多选功能。请注意，上述代码只是一个简单的示例，你可以根据自己的实际需求进行相应的修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值