select 左右多选 demo html

最新推荐文章于 2022-07-12 22:00:00 发布
最新推荐文章于 2022-07-12 22:00:00 发布
阅读量132 收藏
点赞数
文章标签： HTML Java JSP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/redoor148/article/details/83880844
版权

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/common/commons.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxxxx</title>
</head>
<body>
<div class="title"><span>当前位置：xxxxxx>xxxxx>xxxxxx</span></div>
<form name="tmlgroupmember" method="post" >
<input type="hidden" name="muserTerminalgroup.terminalgrpidx" value="${muserTerminalgroup.terminalgrpidx}" />
<div class="editBlock">
<table class="table2" width="100%">
<tbody>
<tr>
<th>xxxxxx</th>
<td width="20%" >

         <input  type="text" value="${muserTerminalgroup.terminalgrpname}"
               readonly="readonly" maxlength="30" style="border: none"  id="groupname" />
    
</td>

</tr>

<tr>
<th width="90">xxxxxx</th>
<td colspan="5">
<select id="id_brand" class="width140p">
<option value="">--请选择--</option>
<s:iterator value="mtmlBrandList" id="bean" status="stat" var="v">
<option value="${brandindex}">${brandname}</option>
</s:iterator>
</select>
</td>
</tr>
<tr>
<th>xxxxxxx</th>
<td colspan="5">
<div style="width: 400px; padding: 2px">&nbsp;&nbsp;

<input name="terminalmodelname" type="text" id="id_terminalmodelname" class="inputText" />
<input type="button" id="query" value="查询" class="btns" />
<input type="button" id="clear" value="清空" class="btns" />

</div>

<table width="620" height="300">
<tr>
<td width="204" valign="top">
<select id="leftmodel" multiple="multiple" style="width: 250px; height: 300px" οndblclick="leftToRight();">
<s:iterator value="mtmlInfos" id="bean" status="stat" var="v">
<option value="${terminalindex}">${terminalmodelname}</option>
</s:iterator>
</select>

</td>
<td width="207" align=center style="width: 40px;">
<input type="button" value="&gt;&nbsp;&nbsp;" title="选择单个" onClick="leftToRight();" class="inputButton" />
<br />
<br />
<input type="button" value="&gt;&gt;" title="全部选择" onClick="leftToRightAll();" class="inputButton" />
<br />
<br />
<br />
<br />
<br />
<input type="button" value="&lt;&nbsp;&nbsp;" title="移除单个" onClick="rightToLeft();" class="inputButton" />
     <br />
<br />
<input type="button" value="&lt;&lt;" title="全部移除" onClick="rightToLeftAll();" class="inputButton" />
</td>
<td width="204" valign="top">
<select name="rightmodel" id="rightmodel" multiple="multiple" style="width: 250px; height: 300px" οndblclick="rightToLeft();">
<s:iterator value="muserTerminalgroupExtendsList" var="v">
<option value="${terminalindex}">${terminalmodelname}</option>
</s:iterator>
</select>
</td>
</tr>
</table>
 
</tr>
<tr>
<td colspan="6" align="center">
<input name="button" id="id_save" type="button" class="btns" value="确定" />
<input name="button" type="button" class="btns" value="返回" id="id_back" /></td>
</tr>
</tbody>
</table>
</div>
</form>
</body>

</html>

---------------------------------------分割线---------------------------------
欢迎交流。
 

 

 

Vigo_Haivi
关注
实现select多选插件
08-03
NULL 博文链接：https://xdjava.iteye.com/blog/1985102
select多选 multiple的使用示例
09-04
本示例主要讲解如何使用`<select>`的`multiple`属性创建一个多选下拉框，并通过JavaScript来处理用户的选择。 首先，`<select>`标签的`multiple`属性是关键，它告诉浏览器该下拉列表支持多选。例如： ```html ...
select 左右多选 demo js
nj_apple_tree
03-29 108
// submit $(function(){ $("#id_save").click(function(){ if(chkform()){ // alert('submit()'); $("form").attr("action","/tmlportal/tml_saveUserDefinedTmlGroupM...
SelectDemo
菜鸟要飞...
02-13 953
Html页面     Js写法： function Add() {     $("#colname1 option:selected").appendTo($("#colname2"));   }   function Remove() {   $("#colname2 option:selected").appendTo($("#colname
多选列表Select之双击删除与添加Demo
weixin_30407613的博客
03-31 88
双击任一Select控件，查看效果： srcA srcB srcC targetA targetB targetC 源码： <html> <head> <script> functionremoveItem(){ varsltSrc=document.getE...
select学习小demo--实现网页换肤
weixin_34309543的博客
04-11 104
一，简单版<body> <header> <imgsrc="img/2.jpg"alt=""style="width:200px;height:60px;float:left;"> <selectid="btn"> <optionvalue="">请选择</option&gt...
layui-多选下拉框-xm-select-demo源码
最新发布
10-10
《layui-多选下拉框-xm-select：前端开发中的高效解决方案》 在现代Web开发中，用户界面的交互性和易用性是至关重要的。layui框架以其轻量级、高效和丰富的组件库，成为了众多开发者青睐的选择。尤其在构建多选...
xmselect日期多选组件
09-06
在"xmselect日期多选组件demo"中，我们可以看到该组件的实例展示，它提供了直观的交互和良好的用户体验。 "日期多选"是该组件的核心特性，意味着用户可以同时选择多个日期，而不局限于单个日期选择。这种功能对于...
前端web select 多层级选择。利用 ztree.js 实现下拉框的多选和单选demo.有兴趣的可以了解一下。
03-02
在 `demo001` 文件中，你可能会找到具体的 HTML、CSS、JavaScript 代码示例，帮助你更好地理解和应用这个功能。记住，实践是检验真理的唯一标准，动手尝试并根据需求进行调整，才能真正掌握这个技术。 总的来说，...
多选列表的demo
08-13
在HTML中，多选列表通常使用`<select>`标签来创建，通过设置`multiple`属性，可以启用多选功能。一个简单的多选列表示例如下： ```html <select multiple> <option value="option1">Option 1 ...
layui select 下拉多选查询（联动）
shmilyhq的博客
07-12 4602
如图 select多选联动 前端代码定义如下： html 1、引入插件 2、定义界面 3、数据初始化 注意在其他调用js里面使用时需重新初始化数据后端代码块 以上个人拙见，仅供参考！ 数据插件提取地址 链接：https://pan.baidu.com/s/1B01Gt3SdKPETai6wcojuaA 提取码：tkbt...
select实现多选
夏至的博客
07-18 1万+
选择用select下拉框实现多选。<select multiple="multiple" ></select>
HTML中select标签单选多选详解
热门推荐
且行且码且思且娱
11-08 16万+
select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 表单数据提交给服务器时包括 name 属性。 一、基本用法：   Volvo   Saab   Opel   Audi 其中，标签可以省掉，在页面中用法 SELECT NAME="studyCenter"
select 下拉框多选，用select代替checkbox
php菜鸟技术天地
03-31 8万+
演示：http://www.freejs.net/demo/524/index.html&lt;select class="demo" multiple="multiple"&gt; &lt;optgroup label="Languages"&gt; &lt;option value="cp"&gt;C++&lt;/option&g
html 原生下拉菜单 select ，多选 multiple
FungLeo's Blog
09-23 2万+
1 2 3 4 5 只要加上 multiple 参数即可实现多选。做个记录。
html5-关于select元素的一些你不知道的操作
harmsworth的博客
05-24 1619
select元素的常用操作 添加option选项 1.使用选择框的add()方法 2.使用DOM方法 3.使用option构造函数（IE8之前存在问题） 4.使用insertBefore()方法，可以将元素插入到指定位置 change事件 移除option选项 1.使用DOM的removeChild()方法 2.使用选择框的remove()方法 3.使用DOM出现之前的遗留方式 ...
HTML多选操作的实现
weixin_33985679的博客
11-07 3290
最近写了一个工作室随机出人为某部门干活的小Demo 处理的过程中也学到了一个新技能:多选操作,主要是前端的实现 这里就简单记录一下 不过学长说我的代码耦合性太强,不宜于维护.......再加油吧 首先是思路,构造思路往往比写代码更占据时间 我首先想到的是那种点击之后可以切换css属性的前端样式 然后就是切换的时候记录对应的所选ID,堆到数组并post给后端 动态css属性 全部都是JQ在带节...
select下拉框多选，超级好用！十分强大！
bokestudy的博客
05-13 10万+
正文： 先说点废话：一个需求,想把select变成下拉多选，网上查找了半天，给出的方案都是自定义一个标签，或者弄个什么ul下面li进行选择，看起来就繁琐，本人只想在select上面做文章，不得已，自己写了一个，只需要在select上加个属性即可，方便实用！ 2019.11.30之前，算是selectMultip的第一个版本，没想到用的人还不少，自然也...
JQuery----Demo----左右select选择
ZHANGLIHAOOO的博客
03-31 417
&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
xm-select渲染多选下拉框
05-10
xm-select 是一个基于 layui 的下拉框组件，可以实现多选、搜索、异步加载等功能。下面是一个简单的示例代码： ```html <div class="layui-form-item"> <label class="layui-form-label">多选下拉框</label> <div class="layui-input-block"> <select xm-select="demo2" xm-select-max="3" xm-select-search xm-select-skin="default" name="city[]" lay-verify="required" multiple> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> <option value="4">杭州</option> <option value="5">南京</option> <option value="6">武汉</option> <option value="7">成都</option> </select> </div> </div> ``` 其中，`xm-select` 属性指定了下拉框的 ID，`xm-select-max` 属性指定了最多可选项数，`xm-select-search` 属性表示开启搜索功能，`xm-select-skin` 属性指定了皮肤样式，`multiple` 属性表示开启多选。 在 JavaScript 中，我们需要使用 `xmSelect` 函数初始化下拉框，并设置各种配置项： ```javascript layui.use(['xmSelect'], function(){ var xmSelect = layui.xmSelect; var demo2 = xmSelect.render({ el: '#demo2', name: 'city', layVerify: 'required', filterable: true, searchPlaceholder: '请选择城市', tips: '最多选择3个城市', max: 3, data: [{ name: '北京', value: 0 }, { name: '上海', value: 1 }, { name: '广州', value: 2 }, { name: '深圳', value: 3 }, { name: '杭州', value: 4 }, { name: '南京', value: 5 }, { name: '武汉', value: 6 }, { name: '成都', value: 7 }] }); }); ``` 其中，`el` 属性指定了下拉框的 ID，`name` 属性指定了提交表单时的参数名，`layVerify` 属性指定了表单验证规则，`filterable` 属性表示开启搜索功能，`searchPlaceholder` 属性指定了搜索框的提示文本，`tips` 属性指定了超出可选项数时的提示文本，`max` 属性指定了最多可选项数，`data` 属性指定了下拉框的选项数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值