两个select multiple 多选 全选 取值 增加 删除 问题

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量4.3k 收藏
点赞数
分类专栏： javascript 文章标签： button input function javascript html border

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>选择下拉菜单--http://www.yongfa365.com/item/686ba37800f67121.html</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Description" CONTENT="Power by 51windows.Net">
</HEAD>
<BODY>
<form method="post" name="myform">
<table border="1" width="400">
<tr>
<td><CENTER>
可选择排序方式
</CENTER></td>
<td></td>
<td><CENTER>
已选择排序方式
</CENTER></td>
</tr>
<tr>
<td width="40%"><select style="width:100%;" multiple name="left" size="8"
οndblclick="moveOption(document.getElementById('left'), document.getElementById('right'))">
<option value="20">按编入时间(晚到早)</option>
<option value="30">按编入时间(早到晚)</option>
<option value="40">按点击率(升序)</option>
<option value="50">按点击率(降序)</option>
<option value="60">按资产名称(升序)</option>
<option value="70">按资产名称(升序)</option>
</select>
</td>
<td width="20%" align="center"><input type="button" value=" >>>> " onClick="moveOption(document.getElementById('left'), document.getElementById('right'))">
<br>
<br>
<input type="button" value=" <<<< " onClick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</td>
<td width="40%"><select style="width:100%;" multiple name="right" size="8"
οndblclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</select>
</td>
</tr>
<tr>
<td colspan="3"><CENTER>
<INPUT TYPE="button" value="优先级上升" onClick="changepos(right,-1)">
<INPUT TYPE="button" value="优先级下降" onClick="changepos(right,1)">
<INPUT TYPE="button" value="优先级置顶" onClick="gototop(right)">
</CENTER></td>
</tr>
</table>
值：
<input type="text" name="result" id="result" size="40" value="" />
</form>
<script language="JavaScript">
<!--
function moveOption(e1, e2){
for(var i=0;i<e1.options.length;i++){
if(e1.options[i].selected){
var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));
e1.remove(i);
i=i-1
}
}
document.getElementById('result').value=getvalue(document.getElementById('right'));
}
function getvalue(geto){
//var allvalue = "";
//for(var i=0;i<geto.options.length;i++){
// allvalue +=geto.options[i].value + ",";
//}
var resultArray = new Array();
for(var i=0;i<geto.options.length;i++){
resultArray.push(geto.options[i].value);
}
return resultArray.join();
}
function changepos(obj,index){
if(index==-1){
if(obj.selectedIndex !=-1){
if (obj.selectedIndex>0){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1));
document.getElementById('result').value=getvalue(document.getElementById('right'));
}
}else{
alert("请至少选择一个已选择排序方式");
}
}else if(index==1){
if(obj.selectedIndex !=-1){
if (obj.selectedIndex<obj.options.length-1) {
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1));
document.getElementById('result').value=getvalue(document.getElementById('right'));
}
}else{
alert("请至少选择一个已选择排序方式");
}
}
}
function gototop(obj){
if(obj.multiple){
if(obj.selectedIndex !=-1){
for(var selIndex=0; selIndex<obj.options.length; selIndex++){
if(obj.options[selIndex].selected){
var transferIndex = selIndex;
while(transferIndex > 0 && !obj.options[transferIndex - 1].selected){
obj.options[transferIndex].swapNode(obj.options[transferIndex - 1]);
transferIndex --;
}
document.getElementById('result').value=getvalue(document.getElementById('right'));
}
}
}else{
alert("请至少选择一个已选择排序方式");
}
}else{
if(obj.selectedIndex !=-1){
var selIndex = obj.selectedIndex;
while(selIndex > 0){
obj.options[selIndex].swapNode(obj.options[selIndex - 1]);
selIndex --;
}
document.getElementById('result').value=getvalue(document.getElementById('right'));
}else{
alert("请至少选择一个已选择排序方式");
}
}
}
//-->
</script>
</BODY>
</HTML>
转自：http://www.yongfa365.com/Item/686ba37800f67121.html

ijackson
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html多选下拉框 ，CheckBox的Select组件 可多选的下拉框
04-09
html多选下拉框 ，CheckBox的Select组件。可多选的下拉框。
el-select最多选择两个
weixin_35756690的博客
02-16 2321
el-select 是一个基于 Element UI 的下拉选择组件，如果需要限制 el-select 最多只能选择两个选项，可以使用该组件提供的 multiple 和 limit 属性来实现。 具体来说，需要将 multiple 属性设置为 true，并将 limit 属性设置为 2，这样 el-select 就能够允许选择多个选项，并且最多只能选择两个选项。 以下是一个简单的示例代码： &lt...
两个select multiple多选全选值增加除题
iteye_10197的博客
05-02 166
选择下拉菜单--http://www.yongfa365.com/item/686ba37800f67121.html 可选择排序方式 已选择排序方式 ...
select 多选联动
haofangkiller的专栏
10-25 901
比如：select1选项内容为[123,345],"123"触发select2为["A","B","C"] ,"345"触发select2为["B","C","D","E"],同时选中"123"，"345"时，则select2应为["A","B","C","D","E"]；废话不多说，直接上代码。刚开始找了两个mutipleSelect库，要么是方法说明不全，要么是select不能被二次赋值更新，不过最终还是找到一个可用，样式简单的多选库，链接在最下边。
select2多选设置select多选，select2取值和赋值
aiting4826的博客
07-04 529
版权声明：转载请注明出处 https://blog.csdn.net/wengedexiaozao/article/details/83753825select2设置select多选，select2取值和赋值,作为筛选条件的时候，取值相对简单，把选中的id值转为字符串传给后端查询，查询之后会刷新页面，为了在下拉框中显示刚刚选中的值，就需要给select赋值，可以将刚才传给后端的字符串再...
多选下拉框实现方式
m0_38051458的博客
05-22 3917
前端插件 select 多选框
下拉多选框multiple-select——2021-03-30
weixin_44977914的博客
03-30 1129
下拉多选框插件multiple-select 取值回显 multiple-select插件网站：http://multiple-select.wenzhixin.net.cn/index.html?locale=zh_CN 用法： 1、动态添加选项 var data = []; $.each(regionData, function (index, value) { $.each(value, function (k, v) { var item = {
html5新增及废除属性
weixin_34419326的博客
06-28 201
html5中，在新增加和废除很多元素的同时，也增加和废除了很多属性。 一、新增属性 1、表单属性 a、autofocus 对input[所有类型]、select、textarea与button指定autofocus属性。它以指定属性的方式让元素在页面加载后自动获得焦点。一个页面只能有一个元素有autofocus属性，同时设置多个，则第一个生效。 这个属性对登录页面很有用，可提升用户体验，...
单选、全选的判断
HAI6545的博客
01-04 408
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table width=500> <thead> <tr> <th><input typ..
html多选框选中事件,HTML多选框(HTML multiple select box)
weixin_34549315的博客
06-04 820
这里有一个小样本，让你开始： http://jsfiddle.net/eUDRV/3/这个例子会从左边的项目(一个或多个)移动到右边，然后再返回。 无论项目(S)在右侧选择将更新右侧的文本框中。我们正在使用的元素：selectinput type="button"input type="text"装裱方式：divsection风格与简单的CSS。 功能提供的JavaScript。我使用jQue...
js multiple全选与取消全选实现代码
10-27
本文章总结了利用jquery与js实现multiple全选与取消全选代码有需要参考的朋友可参考下
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element-ui中 选择器（select）多选下拉框实现全选功能.zip
10-10
更多说明移步：https://blog.csdn.net/ZYS10000/article/details/120118373
jQuery插件-多选全选实时搜索下拉框
02-23
jQuery下拉复选菜单，可实现多选全选功能，并提供下拉框内实时搜索
select复选框带全选
03-14
bootstrap select复选框，可单选，多选，全选，带索引功能
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 338
步骤很详细，直接上教程……
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1515
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
一个小时学习javaScript
weixin_43064364的博客
04-20 942
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
vue2---修饰符
weixin_45503872的博客
04-24 1004
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue select实现多选全选
07-15
要实现Vue Select的多选全选功能，你可以使用以下步骤： 1. 在Vue组件中，使用`v-model`指令将选择的值绑定到一个数据属性上，例如`selectedOptions`。 2. 添加一个全选的复选框，用于选择或取消选择所有选项。你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值