select 左右选择器!!!

最新推荐文章于 2022-01-07 11:07:06 发布
最新推荐文章于 2022-01-07 11:07:06 发布
阅读量1.2k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huanglin02/article/details/8174220
版权
<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!doctype html>
< html >
     < head >
         < title >Site Management Centre</ title >
         < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" />
             < script type = "text/javascript" language = "javascript" >  
    function moveItem(dest, source)  
    {  
         var dest   = ( typeof dest == "string" ? document.getElementById(dest): dest );  
         var source = ( typeof source  == "string" ? document.getElementById(source) : source );  
    
         if( source.tagName.toLowerCase() != "select" || dest.tagName.toLowerCase() != "select" )  
             return;  
    
         for ( index=source.length - 1; index >= 0; index-- ) {  
             if ( source[index].selected ) {  
                 dest.length++;                      
                 dest[dest.length-1].id    = source[index].id;  
                 dest[dest.length-1].value = source[index].value;  
                 dest[dest.length-1].text  = source[index].text;  
                 source[index] = null;  
             }  
         }  
     }  
      
</ script >  
</ head >
< body >
< table width = "20%" border = "1" cellpadding = "0" cellspacing = "0" align = "center" >  
         < tr >  
             < td width = "10%" >          
                 < select size = "10" multiple = "multiple" id = "left" ondblclick = "moveItem(right,this)" style = "width:120px; " >  
                     < option value = "def7" >ListItem1</ option >  
                     < option value = "abcd6" >ListItem2</ option >  
                 </ select >  
             </ td >  
             < td width = "3%" >  
                 < input type = "button" value=" >> " name="btnRight" onclick="moveItem(right,left)" />                
                 < input type = "button" value = " << " onclick = "moveItem(left,right)" id = "btn" name = "btnLeft" />  
             </ td >  
             < td width = "10%" >  
            
                 < select size = "10" multiple = "multiple" id = "right" ondblclick = "moveItem(left,this)" style = "width:120px; " >  
                 </ select >  
             </ td >  
         </ tr >  
     </ table >  
     </ body >
      
</ html >
小律律
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现 左右 双向选择器 挺好用
08-19
今天刚弄好一个双向选择器，挺好用的。 分享于此 下载即可使用。
jQuery双向列表选择器select版
11-30
在上篇文章给大家介绍了div模拟版链接：//www.jb51.net/article/96211.htm，如果大家感兴趣可以参考下。 这个是select版的，若想美化某些样式是不支持得，可以用div模拟版的，功能基本实现能用了，需要其他功能自己加上。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>双向列表选择器select版</title> [removed][removed] <script type="te
左右选择器
06-15
左右选择器，可以多选，全选，反向多选和全选
js实现左右双向选择器
10-10
js非常简单的实现了左右双向选择器，非常简单，拿过去就能用，希望能帮助到你
jquery 左右选择器
czpae86x的专栏
07-05 158
最近写的jquery 左右选择器，代码见附件，注意，所需要的js包请自己搜索下载(如jquery.js/jqui等等都是常用的js包，这里就不上传了) 。        
flex 左右左右选择器
cengxiangshun的专栏
08-10 190
[code="java"] [/code] 结果图片如下： [img]http://dl.iteye.com/upload/attachment/533702/59cd1fee-8334-33eb-a6df-df7af8382c47.jpg[/img] ...
select 左右多选实现
u012406790的专栏
09-22 1182
function $(e){return document.getElementById(e);} function PutRightOneClk(str) { if($(str+"0").options.selectedIndex == -1){return false;} while($(str+"0").options.selectedIndex > -1){ var id = $(
select选择框内容左右移动
04-08
本主题聚焦于如何实现`select`选择框内容的左右移动功能，这是一种增强用户体验的方式，尤其适用于需要用户在多个选项间频繁切换的场景。下面将详细探讨这一功能的实现原理、技术栈以及相关的编程知识点。 1. **...
jquery双向选择器两侧select框列表文字左右选择器代码
10-31
本文将深入探讨“jquery双向选择器两侧select框列表文字左右选择器代码”，这是一种常见于网页表单设计的功能，用于实现两个下拉列表（select框）之间的双向同步选择。 首先，我们需要理解jQuery的选择器。jQuery...
基于jquery实现select选择框内容左右移动添加删除代码分享
10-23
核心的JavaScript代码包含在`<script>`标签中，通过jQuery的选择器和事件处理函数实现功能。当页面加载完成（`$(function() {...})`，即DOM准备就绪时，执行以下操作： 1. `$('#add')`：点击“移至右边”按钮时，...
jQuery实现双向选择列表框
05-26
NULL 博文链接：https://wen2r.iteye.com/blog/497513
jQuery实现Select左右复制移动内容
10-21
总的来说，这个jQuery实现的Select左右复制移动内容提供了一个实用的交互方式，帮助用户更方便地管理他们的选择。同时，由于代码结构清晰，易于理解和扩展，因此在实际开发中具有很高的价值。希望这个介绍对你的项目...
JQuery选择器(层次选择器)左右选中,左右移动
wei_Bug的博客
05-02 1263
要求: >：将左侧被选中的第一个记录移动到右边（如果同时选中多次，只移动第一个） >>：将左侧选中的所有记录移动到右边 >>>：将左侧的记录移动到右边 下面附上部分代码: 首先,需要导入以下插件: <script type="text/javascript" src="jquery-confirm/jquery-co...
JQuery----Demo----左右select选择
ZHANGLIHAOOO的博客
03-31 387
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; cha
MultiSelect左右选择控件的设计与实现
星.云计算
06-06 254
由于项目中用到左右选择的控件，网上找了一些相关的实现，基本上有两个： 1、基于JQuery UI的控件： 这个看起来样式不错，而且使用起来功能也比较齐全，但是与传统的左边选择到右边的方式不同，有点别扭。 2、某个兄弟手写的一个控件： 这个符合我的需求，简单实用，但是不满足我的另一个需求，我的需求是右边的选择框需要能选择不同颜色的图片，而且这个样式有点不美观。 怎奈自己写一个吧，费...
Select 选择器
吕世良
01-07 2033
一、当选项过多时，使用下拉菜单展示并选择内容（可以利用搜索功能快速查找选项） 二、样式截图 1、选择器 2、选择器内容展示 3、选择器查询（和2结合一起看） 三、代码展示 <template> <el-select v-model="value" filterable placeholder="请选择"> <el-option v-for="item in options" :key="item.value" ...
selector选择器
qq79907141的博客
04-16 241
1.在资源文件res里的drawable目录里写selector选择器2.这个是图片的状态选择器，放在drawable目录里上面是按下状态的，下面是正常状态的&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt; ...
html中左右移动选择框,HTML选择框，我该如何移动/复制所选的选项从一个<select>到另一个...
weixin_36059505的博客
06-03 552
有在你的代码的两个问题，1，获取所选选项的代码是错误的。以下是它应该如何。var selectedOpts = $(this).prev('select').find('option:selected');2，该代码获取到移动选项选择是错误的。我想不到一个不使用css选择器的方式来获取选择。在我看来，这样做明显地表达了意图。修改后的标记(添加CSS类到每个选择)：tototititatatutu修...
html左右选择滑块效果,jQuery左右滑动 选取数值
weixin_39914825的博客
06-04 508
插件描述：jQuery左右滑动效果选取数值是一款范围选择器插件jRange，购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等经常用到的。jQuery左右滑动效果选取数值是一款范围选择器插件jRange购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等经常用到的。1、引入js和css以及jquery2、html添加input表单获取值3、html加入js$(function()...
uiapp使用vue3的语法实现月份选择器
最新发布
06-02
好的，以下是一个使用 Vue3 的语法实现月份选择器的示例代码： ```vue <template> <div class="month-picker"> <input type="text" v-model="selectedMonth" readonly @click="showPicker" /> <div class="picker" v-show="isPickerVisible"> <div class="header"> <button @click="previousYear"><<</button> <button @click="previousMonth"><</button> <span>{{ currentYear }} 年 {{ currentMonth }} 月</span> <button @click="nextMonth">></button> <button @click="nextYear">>></button> </div> <div class="body"> <div class="month" v-for="(month, index) in months" :key="index" @click="selectMonth(month)"> {{ month }} </div> </div> </div> </div> </template> <script> import { ref, computed } from 'vue'; export default { name: 'MonthPicker', setup() { const selectedMonth = ref(''); const isPickerVisible = ref(false); const currentYear = ref(new Date().getFullYear()); const currentMonth = ref(new Date().getMonth() + 1); const months = computed(() => { const result = []; for (let i = 1; i <= 12; i++) { result.push(`${i} 月`); } return result; }); const showPicker = () => { isPickerVisible.value = true; }; const hidePicker = () => { isPickerVisible.value = false; }; const previousMonth = () => { if (currentMonth.value === 1) { currentMonth.value = 12; currentYear.value -= 1; } else { currentMonth.value -= 1; } }; const nextMonth = () => { if (currentMonth.value === 12) { currentMonth.value = 1; currentYear.value += 1; } else { currentMonth.value += 1; } }; const previousYear = () => { currentYear.value -= 1; }; const nextYear = () => { currentYear.value += 1; }; const selectMonth = (month) => { selectedMonth.value = month; hidePicker(); }; return { selectedMonth, isPickerVisible, currentYear, currentMonth, months, showPicker, hidePicker, previousMonth, nextMonth, previousYear, nextYear, selectMonth, }; }, }; </script> <style scoped> .month-picker { position: relative; } .picker { position: absolute; top: 100%; left: 0; z-index: 1; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .header { display: flex; justify-content: space-between; align-items: center; padding: 8px; background-color: #f5f5f5; } .header button { border: none; background-color: transparent; font-size: 14px; cursor: pointer; } .body { display: flex; flex-wrap: wrap; padding: 8px; } .month { flex-basis: 25%; padding: 8px; text-align: center; cursor: pointer; } .month:hover { background-color: #f5f5f5; } </style> ``` 这个月份选择器组件包含一个输入框和一个下拉框，用户可以通过点击输入框来显示下拉框，从而选择一个月份。下拉框显示了当前年份和月份，以及所有的月份选项。用户可以通过点击月份选项来选择一个月份，选择后下拉框会自动隐藏并将选择的月份显示在输入框中。用户还可以通过左右箭头按钮来切换年份和月份。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值