js select多选列表传值代码（js操作select选择）

25-02-02 31

想了解jsselect多选列表传值代码的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于js操作select选择的相关问题，此外，我们还将为您介绍关于Bootstrapselect多选下拉框实

想了解js select多选列表传值代码的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于js操作select选择的相关问题，此外，我们还将为您介绍关于Bootstrap select多选下拉框实现代码、Bootstrap-select多选下拉框实现、element ui中的select多选回显之后不能正常编辑、element ui中的select多选问题的新知识。

本文目录一览：

js select多选列表传值代码（js操作select选择）
Bootstrap select多选下拉框实现代码
Bootstrap-select多选下拉框实现
element ui中的select多选回显之后不能正常编辑
element ui中的select多选问题

js select多选列表传值代码（js操作select选择）

<html> <head> <title>js select</title> <script> /*移除左边选中的列表项到右边*/ function fMoveSelectedOptionsLeftToRight(oLeft,oRight) { if(!(oLeft&&oRight)) { return; } if(!hasOptions(oLeft)) { return; } if(oLeft.selectedIndex==-1) { oLeft.selectedIndex=0; } for(var i=0;i<oLeft.options.length;i++) { if(oLeft.options[i].selected) { var oOption = document.createElement("OPTION"); oOption.setAttribute("text",oLeft.options[i].text); oOption.setAttribute("value",oLeft.options[i].value); oRight.add(oOption); } } clearSelectedOptions(oLeft); } /*移除左边的所有列表项到右边*/ function fMoveAllOptionsLeftToRight(oLeft,oRight) { if(!(oLeft&&oRight)) { return; } if(!hasOptions(oLeft)) { return; } for(var i=0;i<oLeft.options.length;i++) { var oOption = document.createElement("OPTION"); oOption.setAttribute("text",oLeft.options[i].text); oOption.setAttribute("value",oLeft.options[i].value); oRight.add(oOption); } clearAllOptions(oLeft); } /*移除右边选中的列表项到左边*/ function fMoveSelectedOptionsRightToLeft(oLeft,oRight) { if(!(oLeft&&oRight)) { return; } if(!hasOptions(oRight)) { return; } if(oRight.selectedIndex==-1) { oRight.selectedIndex=0; } for(var i=0;i<oRight.options.length;i++) { if(oRight.options[i].selected) { var oOption = document.createElement("OPTION"); oOption.setAttribute("text",oRight.options[i].text); oOption.setAttribute("value",oRight.options[i].value); oLeft.add(oOption); } } clearSelectedOptions(oRight); } /*移除右边的所有列表项到左边*/ function fMoveAllOptionsRightToLeft(oLeft,oRight) { if(!(oLeft&&oRight)) { return; } if(!hasOptions(oRight)) { return; } for(var i=0;i<oRight.options.length;i++) { var oOption = document.createElement("OPTION"); oOption.setAttribute("text",oRight.options[i].text); oOption.setAttribute("value",oRight.options[i].value); oLeft.add(oOption); } clearAllOptions(oRight); } /*清空select所有options*/ function clearAllOptions(oSelect) { if(oSelect) { var ops=oSelect.options; while(ops.length>0) { oSelect.remove(ops.length-1); } } } /*清空select所有选中的options*/ function clearSelectedOptions(oSelect) { if(oSelect) { for(var i=0;i<oSelect.options.length;i++) { if(oSelect.options[i].selected) { oSelect.remove(i--); } } } } /*判断select是否有options*/ function hasOptions(oSelect) { if(oSelect) { return oSelect.options.length>0; } return false; } function checkForm(){ var onRight=document.forms[0].rightItem; alert(onRight.options.length); for(var i=0;i<onRight.options.length;i++){ var text=onRight.options[i].text; var value=onRight.options[i].value; alert(value+" "+text); } } </script> </head> <body> <form name="form1" method="post" action=""> <table border="0" align="center" width="75%" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" align="center"> <tr> <td> <select name="leftItem"size="10" multiple="multiple"> <option value="1">item1</option> <option value="2">item2</option> <option value="3">item3</option> <option value="4">item4</option> <option value="5">item5</option> </select> </td> </tr> </table> </td> <td> <table border="0" align="center"> <tr><td height="30"><input type="button" name="button1"value="&gt;" onClick="fMoveSelectedOptionsLeftToRight(document.all.leftItem,document.all.rightItem)"></td></tr> <tr><td height="30"><input type="button" name="button2"value="&gt;&gt;" onClick="fMoveAllOptionsLeftToRight(document.all.leftItem,document.all.rightItem)"></td></tr> <tr><td height="30"><input type="button" name="button3"value="&lt;" onClick="fMoveSelectedOptionsRightToLeft(document.all.leftItem,document.all.rightItem)"></td></tr> <tr><td height="30"><input type="button" name="button4"value="&lt;&lt;" onClick="fMoveAllOptionsRightToLeft(document.all.leftItem,document.all.rightItem)"></td></tr> </table> </td> <td> <table border="0" align="center"> <tr> <td> <select name="rightItem"size="10" multiple="multiple"> </select> </td> </tr> </table> </td> </tr> </table> <table border="0" align="center"> <tr height="40"> <td><input type="button" value="保存" onClick="checkForm()"></td> </tr> </table> </form> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

js核心代码

复制代码代码如下:

/*移除左边选中的列表项到右边*/
function fMoveSelectedOptionsLeftToRight(oLeft,oRight)
{
if(!(oLeft&&oRight))
{
return;
}
if(!hasOptions(oLeft))
{
return;
}
if(oLeft.selectedIndex==-1)
{
oLeft.selectedIndex=0;
}
for(var i=0;i<oLeft.options.length;i++)
{
if(oLeft.options[i].selected)
{
var oOption = document.createElement("OPTION");
oOption.setAttribute("text",oLeft.options[i].text);
oOption.setAttribute("value",oLeft.options[i].value);
oRight.add(oOption);
}
}
clearSelectedOptions(oLeft);
}
/*移除左边的所有列表项到右边*/
function fMoveAllOptionsLeftToRight(oLeft,oRight)
{
if(!(oLeft&&oRight))
{
return;
}
if(!hasOptions(oLeft))
{
return;
}
for(var i=0;i<oLeft.options.length;i++)
{
var oOption = document.createElement("OPTION");
oOption.setAttribute("text",oLeft.options[i].text);
oOption.setAttribute("value",oLeft.options[i].value);
oRight.add(oOption);
}
clearAllOptions(oLeft);
}
/*移除右边选中的列表项到左边*/
function fMoveSelectedOptionsRightToLeft(oLeft,oRight)
{
if(!(oLeft&&oRight))
{
return;
}
if(!hasOptions(oRight))
{
return;
}
if(oRight.selectedIndex==-1)
{
oRight.selectedIndex=0;
}
for(var i=0;i<oRight.options.length;i++)
{
if(oRight.options[i].selected)
{
var oOption = document.createElement("OPTION");
oOption.setAttribute("text",oRight.options[i].text);
oOption.setAttribute("value",oRight.options[i].value);
oLeft.add(oOption);
}
}
clearSelectedOptions(oRight);
}
/*移除右边的所有列表项到左边*/
function fMoveAllOptionsRightToLeft(oLeft,oRight)
{
if(!(oLeft&&oRight))
{
return;
}
if(!hasOptions(oRight))
{
return;
}
for(var i=0;i<oRight.options.length;i++)
{
var oOption = document.createElement("OPTION");
oOption.setAttribute("text",oRight.options[i].text);
oOption.setAttribute("value",oRight.options[i].value);
oLeft.add(oOption);
}
clearAllOptions(oRight);
}
/*清空select所有options*/
function clearAllOptions(oSelect)
{
if(oSelect)
{
var ops=oSelect.options;
while(ops.length>0)
{
oSelect.remove(ops.length-1);
}
}
}
/*清空select所有选中的options*/
function clearSelectedOptions(oSelect)
{
if(oSelect)
{
for(var i=0;i<oSelect.options.length;i++)
{
if(oSelect.options[i].selected)
{
oSelect.remove(i--);
}
}
}
}
/*判断select是否有options*/
function hasOptions(oSelect)
{
if(oSelect)
{
return oSelect.options.length>0;
}
return false;
}

您可能感兴趣的文章:

js实现可输入可选择的select下拉框
Angularjs实现带查找筛选功能的select下拉框示例代码
JS组件Bootstrap Select2使用方法解析
js自定义select下拉框美化特效
angularjs 实现带查找筛选功能的select下拉框实例
javascript Select标记中options操作方法集合
JS组件Bootstrap Select2使用方法详解
javascript操作select参考代码
js 操作select和option常用代码整理
JS获取select-option-text_value的方法
JS操作select下拉框动态变动(创建/删除/获取)
js select option对象小结
JavaScript实现的select点菜功能示例

Bootstrap select多选下拉框实现代码

前言

项目中要实现多选，就想到用插件，选择了bootstrap-select。

附上官网api链接，nofollow" target="_blank" href="http://silviomoreto.github.io/bootstrap-select/">http://silviomoreto.github.io/bootstrap-select/.

没有中文的。对付看吧。有机会每个方法实践一下，会总结的。我自己也等着呢。

需要引用的它们

<div>
<prehttps://www.jb51.cc/tag/rush/" target="_blank">rush:xhtml;">

Bootstrap-select多选下拉框实现

总结

以上是小编为你收集整理的Bootstrap-select多选下拉框实现全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

element ui中的select多选回显之后不能正常编辑

由于项目需求，在项目中使用用到了element中的select组件的多选功能（multiple），多选之后保存回显所选内容，从后端会拿到一个数组，然后我把这个数组赋值给前端多选对应的数组，这样多选的数据可以正常显示

问题是回显之后不能正常编辑，点击删除小图标也失效
解决方法采用change事件

在change事件中添加一个VUE本身的$forceUpdate方法进行强制渲染即可使select组件可正常编辑

采用这样的强制渲染的方式解决，不知道还有其他的方法嘛?

element ui中的select多选问题

在使用select下拉框多选时，在编辑用户角色时，编辑界面为select下拉框的model赋值了，选择的数据有问题，输入框中的值不能与下拉框的值对应上。

如图：

解决：

<el-select  ref="select" v-model="roles" placeholder="请选择用户角色" @change="$forceUpdate()"multiple clearable>
<el-option v-for="item in roleData" :label="item.role" :value="item.serial" :key="item.serial"></el-option>
</el-select>

//编辑
        editBtn(row) {
            this.addForm = { ...row }
            console.log(row);
            let arr = []
            for(const data of row.resourceList) {
                arr.push(data.serial)
            }
            console.log(arr)
            
            this.roles = arr;
            
            this.titleName = ''编辑''
            this.dialogVisible = true;
        },

下拉框中的数据源roleData是一个数组，选中后的值也是一个数组。但是在后端存储的时候是转换成字符串存到数据库中的，所以在编辑界面从后端获取的返回值是一个字符串，首选要把这个字符串转换成数组，绑定到select 的v-model属性上（注意：选中的值就是下拉框数据源中的serial）。

@change="$forceUpdate()"这是强制刷新

然后在提交的时候把这个数组转换成字符串赋给后台指定的字段传给后台就大功告成啦。

今天关于js select多选列表传值代码和js操作select选择的分享就到这里，希望大家有所收获，若想了解更多关于Bootstrap select多选下拉框实现代码、Bootstrap-select多选下拉框实现、element ui中的select多选回显之后不能正常编辑、element ui中的select多选问题等相关知识，可以在本站进行查询。

本文标签：