关于如何动态地在同一页面实现两个 < select > 互传 (s1 <==> s2)

最新推荐文章于 2021-04-28 18:12:49 发布
最新推荐文章于 2021-04-28 18:12:49 发布
阅读量1k 收藏
点赞数
文章标签： vbscript javascript microsoft generator function null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bihu/article/details/2927
版权

 

关于如何动态地在同一页面实现两个<select>互传  (s1 <==> s2)
     
                     （jaklin )
    

    hello! 先祝大家中秋节快乐！

    我们常常会碰到这样一个问题： 如何将在同一页面上的一个<select>或<listbox>的值传到另一个<select>或<listbox>中 ？这是一个很烦人的问题。可是有时候你偏偏会遇到。 那什么办呢？

     下面是我“烟酒”了一个上午， 现贴上来让大家共享。 用的方法是很笨也挺麻烦。不过总是有点成就感的。呵呵！大家看看， 指点指点.....

<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<script language="vbscript">

</script>
<body bgcolor="#ffffff">
<form name="form1"  action="test01.asp" target="_self">
<p><TEXTAREA id=text01 name=text01></TEXTAREA></p>
<table>
   <tr>
     <td>
       <select name="select1" language="javascript" size=5>
    <option value=11111>11111</option>
    <option value=22222>22222</option>
    <option value=33333>33333</option>
       </select>
     </td>
     <td>
    <label onClick=do_select()><font color=#ff00dc><u>->> </u></font> </label><br><br>
    <label onClick=do_select2()><font color=#ff00dc><u><<- </u></font> </label>
     </td>
    <%  
     str="function do_select() {" & vbCrlf & _
             "if (document.form1.select1.options.length > 0) {"&vbCrlf&_
         "var j=0;"&vbCrlf&_
         "for(var i=0;i<document.form1.select1.options.length;i++) {"&vbCrlf & _
         "if(document.form1.select1.options(i).selected) {"&vbCrlf& _
             "j=j+1; break" & vbCrlf & "}"&vbCrlf & "}"&vbCrlf& _
         "if (j > 0) {"&vbCrlf&_                    "document.form1.sel2.options[document.form1.sel2.options.length] = new Option(" &  _
              "document.form1.select1.options[document.form1.select1.selectedIndex].value,"  & _
              "document.form1.select1.options[document.form1.select1.selectedIndex].value);"& vbCrlf
    Response.Write "<td><SELECT id=sel2  name=sel2 size=5>"
    Response.Write "</select></td>"
          str=str&vbCrlf&"document.form1.select1.options[document.form1.select1.selectedIndex]=null;"&vbCrlf & _
    "if (document.form1.select1.options.length > 1) {"&vbCrlf   '&_
    str=str&vbCrlf & "}" & vbCrlf & "}" & vbCrlf& "}" & vbCrlf& "}" & vbCrlf
    Response.Write "<SCR"& "IPT LANGUAGE=""JavaScript"">" & vbCrlf
    Response.Write str & vbCrlf & "</SCR"&"IPT>"& vbCrlf
              
        %>
      
    <%
    str=""
    str="function do_select2() {" & vbCrlf & _
    "if (document.form1.sel2.options.length > 0) {"&vbCrlf&_
    "var j=0;"&vbCrlf&_
    "for(var i=0;i<document.form1.sel2.options.length;i++) {"&vbCrlf & _
    "if(document.form1.sel2.options(i).selected) {"&vbCrlf& _
    "j=j+1; break" & vbCrlf & "}"&vbCrlf & "}"&vbCrlf& _
    "if (j > 0) {"&vbCrlf&_
               "document.form1.select1.options[document.form1.select1.options.length] = new Option(" &  _
              "document.form1.sel2.options[document.form1.sel2.selectedIndex].value,"  & _
              "document.form1.sel2.options[document.form1.sel2.selectedIndex].value);"& vbCrlf
           str=str&"document.form1.sel2.options[document.form1.sel2.selectedIndex] =null;" & vbCrlf &"}"& vbCrlf &"}"& vbCrlf &"}"
    Response.Write "<SCR"& "IPT LANGUAGE=""JavaScript"">" & vbCrlf
    Response.Write str & vbCrlf & "</SCR"&"IPT>"& vbCrlf
    %>
       
     </tr>
  </table>
</form>
</body>
</HTML>
bihu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 实现动态循环出的多个select 不能重复选择相同的数据
01-20
Vue 实现动态循环出的多个select 不能重复选择相同的数据前言效果图演示实现逻辑代码总结 前言 1.本篇文章功能的实现是基于vue的计算属性computed 2.个人感觉vue的计算属性computed挺适合做这个功能的，因为通过计算...
jQuery实现两个select控件的互移操作
10-20
本文主要介绍了利用jQuery实现两个<select>控件的互移操作的方法代码，具有很好的参考价值，需要的朋友一起来看下吧
Query实现的<select>动态二级联动菜单
11-26
基于jquery的用<select>实现二级动态联动菜单，里面用到jquer+ajax+json解析方面知识，通过无刷新去后台值实现的，可用性非常好，欢迎大家下载学习。
jquery操作两个select相互传值
qq654433750的专栏
08-29 234
[code="js"] $(document).ready(function(){ $('#addto').click(function(){ var $options = $('#select1 option:selected');//获取当前选中的项 var $remove = $options.remo...
双选框 两个<select>标签组成 高效代码清晰
11-21
由两个<select>标签组成的具有挑选功能的js组建。 可实现左侧的元素移到右侧，右侧移到左侧。 有提交功能。 代码简洁、高效复用性强。 本段代码有Map的遍历读者不必细究。
vue 实现在同一界面实现组件的动态添加和删除功能
12-28
1.插入静态组件，将自己想要循环的组件显示在页面上，利用v-for进行循环操作，操作包括增删。 //所有要显示的子组件，写在一个li标签，有 v-for循环。  <li u00a0v-for=(item, index) in questionList v-bind:...
Jquery实现的的动态无刷新的二级联动菜单
11-26
基于jquery的用<select>实现二级动态联动菜单，里面用到jquer+ajax+json解析方面知识，通过无刷新去后台值实现的，可用性非常好，欢迎大家下载学习。
vue中动态select的使用方法示例
12-30
本文实例讲述了vue中动态select的使用方法。分享给大家供大家参考，具体如下： html代码如下: 通过v-model可以获取到选中的值，如果没值就默认第一个;如果有值就显示有值的那个内容 <template> <div class=...
用javascript实现不按Ctrl实现Multiple Select多选
10-30
用javascript实现不按Ctrl实现Multiple Select多选
myeclipse2017 jsp页面 在select里面写 导致后面代码不是彩色问题
04-13
myeclipse2017 jsp页面 <c:if>在select里面写 导致后面代码不是彩色问题 一半黑一半彩色
jQuery实现动态加载select下拉列表项功能示例
12-09
本文实例讲述了jQuery实现动态加载select下拉列表项功能。分享给大家供大家参考，具体如下： 需求说明： 以前使用的select下拉列表都是静态的，select 的option数据都是写死的。现在项目中的select需要根据不同的...
使用js实现 年月日绑定html <select>控件上
06-13
用js把年月日绑定到html <select>控件
对HTML控件select的option的操作(附全码)_AX
weixin_33978016的博客
09-22 127
以前弄过一次,但没写blog,结果忘了,等想起来,,,等用到了再补上!!下面介绍的是我昨天对select的操作:前提:以下拉框形式显示select,即size="1"(大多以这种形式使用,更符合实际)取select的时候遇到了点问题,明天接着写.生气了,,,,用了两个小时调试得下面这段代码服服帖帖的从中有很多感悟,敬请期待下篇.:【JS调试的总结】①select.options("id")方法取出...
联动组件JAVA<select>代码
05-02
联动组件，当<select>控件中选项发生改变，相应的联动的另一<select>控件
jquery Ajax实现Select动态添加数据
01-19
最近在工作中，遇到了一个关于select的问题。一般情况下，select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示。但是，这次要实现select与别的选项框联动，也就是要动态添加option数据。查阅了很多资料，...
循环u-select，根据后台返回的不同id，给对应的循环u-select渲染数据
maoxiaohei_的博客
04-28 811
把值传给组件，然后在组件上循环数据 ![请添加图片描述](https://img-blog.csdnimg.cn/20210428174701826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf,size_16,color_FFFFFF,t_70 返回的数据展示： "data" : [ { "typeDevi
<html:select>： 选择默认值
12-13
<html:select>： 选择默认值
向元素中动态添加option
08-10
NULL 博文链接：https://longying2008.iteye.com/blog/2203068
前端（jsp+js）
rain2580的博客
08-25 1791
一：功能描述：点击text实现select的实现     &lt;script type="text/javascript"&gt;    arr = new Array("JavaScript与ASP","JavaScript与JSP","JavaScript与ASP.NET","JavaScript与PHP");    function Myselect(){   for (var
<!DOCTYPE html> <html> <head> <title>表格形式</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> <script> // 添加一行 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); for(var i = 0; i < 5; i++){ var cell = row.insertCell(i); cell.innerHTML = '<select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>'; cell.onclick = function(){ this.firstChild.style.display = 'block'; } cell.firstChild.onblur = function(){ this.style.display = 'none'; } cell.firstChild.style.display = 'none'; } } </script> </head> <body> <table id="myTable"> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> <th>列4</th> <th>列5</th> </tr> </thead> <tbody> <tr> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> </tr> </tbody> </table> <button onclick="addRow('myTable')">增加</button> </body> </html>将这段代码用bootstrap进行优化
最新发布
04-23
Sure! 这个表格的代码可以用 Bootstrap 进行优化，具体的代码如下： <!DOCTYPE html> <html> <head> <title>表格形式</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 Bootstrap 的 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css"> <style> table { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> </head> <body> <div class="container"> <table class="table table-bordered table-hover"> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> <th>列4</th> <th>列5</th> </tr> </thead> <tbody> <tr> <td> <select class="form-control"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </td> <td> <select class="form-control"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </td> <td> <select class="form-control"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </td> <td> <select class="form-control"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </td> <td> <select class="form-control"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </td> </tr> </tbody> </table> <div class="text-center"> <button class="btn btn-primary" onClick="addRow('myTable')">增加</button> </div> </div> <!-- 引入 Bootstrap 的 JS 文件 --> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script> <script> // 添加一行 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); for(var i = 0; i < 5; i++) { var cell = row.insertCell(i); cell.innerHTML = '<select class="form-control"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>'; cell.onclick = function(){ this.firstChild.style.display = 'block'; } cell.firstChild.onblur = function(){ this.style.display = 'none'; } cell.firstChild.style.display = 'none'; } } </script> </body> </html> 我希望这个帮助到你！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bihu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值