option与option之间传值（传递多个值）

最新推荐文章于 2023-03-20 16:09:42 发布
最新推荐文章于 2023-03-20 16:09:42 发布
阅读量2.8k 收藏
点赞数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function moveList(from,to)
{
 var fromOption = document.myForm.elements[from];
 
 var fromArray = fromOption.options;
 
 var current=fromOption.selectedIndex;
//当current的值为-1时，表示没有没有选中。
while(current>-1)
  {
   move(fromArray[current],to);
    //把来源option中被选中的值隐藏
 fromArray[current] = null;
 //使用全局变量的方法，是改变循环条件的值。
   current=fromOption.selectedIndex;
  } 
}


function move(fromArray,to)
{
 //得到在option中的位置
 var selectOptionValue = fromArray.value;
 var selectOptionName  = fromArray.text;
 
 //得到去向处的option,并把来源处的值放入其中
 var toOption = document.myForm.elements[to];
 
 
 var toOptionLen = toOption.length;
 //alert(toOptionLen);
 
  var newOption=new Option(selectOptionName,selectOptionValue,false,false);
       toOption.options[toOptionLen]=newOption;


}




function mm()
{
 var rightOption = document.myForm.rightList.options;
 var p = "";
 //得到要删除的项，并传到后台
 for(i=0;i<rightOption.length;i++)
 {
  p=p+rightOption[i].text+"#";
 }
 //以下处可传到后台
 alert(p);
}
</script>


</head>
<body>
<form  name="myForm">
<table>
<tr valign="top">
<td>
<select name="leftList" size="6" multiple style="width:50px;">
<option>a</option>
<option>b</option>
<option>c</option>
<option>h</option>
</select>
</td>


<td>
   <input name="to" type="button" onClick="moveList('leftList','rightList')" value=">>">
<p><input name="backTo" type="button" onClick="moveList('rightList','leftList')" value="<<"></p>
<input name="select" type="button" onClick="mm()" value="删除">
</td>


<td>
<select name="rightList" size="6" multiple style="width:50px;">
  <option>d</option>
  <option>e</option>
  <option>f</option>
</select>
</td>
</tr>
</table>
</form>
</body>
70903
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
两个下拉框的option的相互转换添加
qq_33243148的博客
02-01 258
$("#btnRight").click(function(){ //向右移动option   $("#rightSeletction").append($("#leftSelection  option:selected")); }); 向左移动就是反过来即可。   把获得的json数据放入到select中             使用$().append("&lt;option&...
bootstrap 下拉多选框进行多选传值问题代码分析
08-31
在使用Bootstrap进行Web开发时，有时我们需要实现下拉多选框的功能，并将用户选择的数据传递到后台。在本文中，我们将深入...遵循以上步骤，你应该可以成功地从Bootstrap的下拉多选框中获取并传递多个选中值到后端。
option传值详细写法
weixin_44462233的博客
04-14 1870
view里绑定id js部分 获取相应id并代入下个页面，下个页面内写法如下： 在这儿我的做法是放入data中便于使用。 this.id 最后关于option的详解附上某位大大的链接。写的相当清楚了。结合借鉴可以看的更明白。 https://www.cnblogs.com/qiaojun/p/9879561.html ...
Google C++每周贴士 #173: 以Option结构体传递参数
C++强迫症
04-08 402
（原文链接：https://abseil.io/tips/173 译者：clangpp@gmail.com） C++每周贴士 #173: 以Option结构体传递参数 最初发布于：2019-12-19 作者：John Bandela 更新于：2020-04-06 短链接：abseil.io/tips/173 It came without packages, boxes or bags. An...
html select 多选传值,Js读取select多选的几种方法
weixin_34537864的博客
06-07 874
首先，编写HTML如下：操作系统：windowxpwindow7window10mac os方法function readselect2() {// 方法一var os = document.getElementById("os");var msg = "被选中的项：";for (var i = 0; i < os.length; i++) {if (os.options[i].select...
两个jsp页面之间传值的问题,和checkbox多选框之间的问题
05-01
2. **会话（Session）**：如果需要在多个页面间保持数据，可以将值存储在用户的会话中。使用`HttpSession`对象的`setAttribute()`方法设置值，然后在其他页面中用`getAttribute()`获取。但需注意，过度使用会话可能...
js select多选列表传值代码
10-29
在JavaScript中，`select`元素是用来创建下拉列表的，它可以包含多个`option`元素，用户可以选择一个或多个选项。本文将深入探讨如何处理`select`的多选列表，并实现值的传递。主要关注以下两个方面：从一个`select`...
详解layui弹窗父子窗口之间传参数的方法
08-28
layui 提供了 layer.open() 方法来打开一个新的弹窗，该方法接受一个对象作为参数，该对象可以包含多个属性，例如 title、content、area、success 等。 在 layui 弹窗父子窗口之间传参数时，我们可以使用 layer....
单选框、复选框、下拉框的使用及跨页面传值
08-07
在Android中，我们通常将多个单选框放入一个RadioGroup中，通过RadioGroup来管理它们之间的互斥关系。设置单选框的文本和监听器可以通过XML布局文件或代码动态实现。例如： ```xml android:id="@+id/radio_group...
CMake教程系列-05-选项及变量
喜欢打篮球的普通人
06-26 1260
此函数向项目添加一个选项，可以包含选项介绍及默认值。 第一个参数为选项名称。需要注意的是，此选项不仅仅可以是boolean，也可以是string或list。 第二个参数为选项介绍，为string。 第三个参数为选项默认值，依据选项类型设置。 2.CMAKE_DEPENDENT_OPTION 进阶的。我们可以根据一些选项而额外设置其他选项值。 eg： 第一个参数为选项名称。第二个参数为选项介绍。第三个参数为默认值。当第四个参数为TRUE时，开启此选项并自动设置第二个参数的值为默认值。否则，将强制
JQuery获取Select中option中的值，并由a标签传值
code_while的博客
12-13 1504
    过程坎坷，直接肝代码     我需要用jstl从后台服务器上获取得到的数据ArrayList&lt;String&gt;，即此处的singleSize，利用forEach循环通过select输出，但一直苦于没有什么好方法可以获取到option中的值还得是通过a标签传递到后台。 &lt;select id="select"&gt; &lt;c:forEach items="${lis...
Echarts中Option属性设置
m0_48332054的博客
11-21 1596
Echarts中Option属性设置
Ajax学习笔记
qq_64686768的博客
11-13 371
小白学习ajax
Ruoyi列表点击按钮弹窗传值
qq_47795171的博客
03-20 1169
若依列表点击按钮弹窗传值
【若依(ruoyi)】Bootstrap-Table的使用
热门推荐
sayyy的专栏
03-28 2万+
前言 ruoyi 4.6 若依(ruoyi)将 Bootstrap-Table 进行了封装。与原生的 Bootstrap-Table 使用有些区别，但区别不大。 若依(ruoyi)对 Bootstrap-Table 的封装 若依(ruoyi)封装 Bootstrap-Table 的代码在ruoyi-ui.js中。 若依(ruoyi)封装 Bootstrap-Table 的对象为$.table。通过$.table操作 Bootstrap-Table 得到了简化，且支持单页面中包含多个 Bootstrap-
HTML下拉列表(select)，单选框(radio), 复选框(checkbox)如何向后端传值
starh的博客
04-12 1万+
前言 提示：该文章记录前端往后端传值的一些细节 提示：以下是本篇文章正文内容，下面案例可供参考 一、form是什么？ form是前端往后端传值的一个表单 二、html代码如下 1，下拉列表源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <...
怎么把前端option中的value传到后台_zblog怎么换空间（搬家备份恢复）最稳定方法...
weixin_39767887的博客
11-20 364
今年刚刚使用zblog，不是非常熟悉，但由于空间到期，打算换到新的服务器上面，在经历过3次换空间历程后，发现了一些问题，今天给大家讲解一下zblog的换空间方法，之前也是看了别人的教程，中间出错了很多次(很多的教程没问题，但是他们遇到的情况可能比较少)，还好之前有备份，要不然数据全完了，需要说明的是，请先全盘备份，全盘备份！！！ps：部分插件中的内容也需要手动备份，插件不能依靠数据库或全盘来进行备...
用div ul 多个LI代替select中option 如何定义name并且传值
最新发布
06-07
如果你使用 `<div>` 和 `<ul>` 元素来代替 `<select>` 元素，可以使用自定义属性来实现传值。例如，你可以在每个 `<li>` 元素上定义一个名为 "data-value" 的自定义属性，用于保存该选项的值。然后，在选择项发生变化时，可以获取当前选中项的值，并将其存储到一个隐藏的表单字段中，以便在表单提交时将其传递给服务器。 以下是一个示例代码，用于实现基于 `<div>` 和 `<ul>` 元素的下拉菜单，并将选中项的值传递给服务器： HTML 代码： ``` <form> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 请选择一个选项 </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <ul> <li data-value="1">选项1</li> <li data-value="2">选项2</li> <li data-value="3">选项3</li> </ul> </div> </div> <input type="hidden" name="selectedValue" id="selectedValue"> <button type="submit">提交</button> </form> ``` JavaScript 代码： ``` $(document).ready(function() { $('.dropdown-menu li').on('click', function() { var selectedValue = $(this).data('value'); $('#selectedValue').val(selectedValue); $('.dropdown-toggle').text($(this).text()); }); }); ``` 在这个示例中，我们使用了 Bootstrap 框架来实现下拉菜单的样式。点击选项时，我们获取了该选项的值，并将其存储到名为 "selectedValue" 的隐藏字段中。在点击提交按钮时，该值将被传递到服务器。 注意，这只是一个示例代码，你需要根据自己的实际需求进行修改。同时，你还需要在服务器端编写代码来接收该值，并进行相应的处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值