`
pouyang
  • 浏览: 320053 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS js控制select多选

阅读更多

<script>
	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'));
		 //alert( document.getElementById('result').value);
	}
function getvalue(geto){
 var resultArray = new Array();
 for(var i=0;i<geto.options.length;i++){
  resultArray.push(geto.options[i].value);
 }
 return resultArray.join();
}
</script>

<table>


 <tr>
	  <td width="30%" align="center">
	    <select name="left" id="left" style="height:200px;width=50px;" multiple="multiple">     
			<option value='1'>001</option>
			<option value='2'>002</option>
			<option value='3'>003</option>
			<option value='4'>004</option>	
		</select>
	  </td>
      <td width="20%" align="center">
		  <input type="button" value=" >>>> " id="turnRightBtn" onClick="moveOption(document.getElementById('left'), document.getElementById('right'))">
		   <br>
		   <br>
		   <input type="button" id="turnLeftBtn" value=" <<<< " onClick="moveOption(document.getElementById('right'), document.getElementById('left'))">
      </td>
	  <td align="left">
	    <select name="right" id="right" style="height:200px;width=50px;" multiple="multiple"> 
		</select>
		<input type="hidden" name="result" id="result" value="" />
		</td>
	</tr>
</table>
分享到:
评论

相关推荐

    JQ JS javascript 多选 多选下拉框 select bootstrap-select

    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"&gt; ``` 接着,对`&lt;select&gt;`元素应用`class="selectpicker"`,并可自定义其他属性,如`data-live-search=...

    原生select实现多选功能

    原生select实现多选功能

    下拉多选插件ySelect.js.rar

    下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选...

    下拉框多选select多选

    在网页设计和开发中,"下拉框多选select多选"是一个常见的功能,它允许用户在下拉菜单中选择多个选项,而不仅仅是一个。在HTML中,`&lt;select&gt;`元素通常用于创建这样的下拉菜单,但默认情况下,`&lt;select&gt;`只支持单选。...

    select多选下拉列表+模糊查询功能.rar

    select多选下拉列表+模糊查询功能,亲测完整,有ASP和HTML样例,代码完整。 &lt;!DOCTYPE html&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;script src="jquery.min.js"&gt; &lt;script type="text/javascript" src="jquery....

    select多选下拉框美化

    "select多选下拉框美化"这个主题就是关于如何使用JavaScript库jQuery(jq)和CSS技术来提升HTML原生select元素的视觉效果和交互体验。下面我们将深入探讨这个话题。 首先,原生的HTML select元素在不同浏览器上展示...

    JS多选下拉框_实现多项选择

    JS多选下拉框,实现多选。点击显示下拉。 &lt;script type="text/javascript"&gt; &lt;!-- function $(e){return document.getElementById(e) ;} $('btnSelect').onclick = function () { //§ó§ï?? $('status')....

    select多选与美化

    总之,"select多选与美化"涉及了HTML、CSS、JavaScript和jQuery的综合应用,目标是创建一个功能齐全、美观且兼容性强的多选下拉列表,提升用户在网页交互中的体验。通过学习和实践,开发者可以掌握这种常见但又重要...

    下拉框多选 js动态实现

    这个需求通常涉及到HTML、CSS和JavaScript技术的结合使用,特别是JavaScript库如jQuery或者其他自定义JS代码,来实现下拉框的多选功能。在这里,我们主要讨论如何使用div元素和JavaScript来模拟原生的下拉框多选效果...

    element ui select多选组件 重构

    在本项目中,我们关注的是 "select" 多选组件的重构,它是一个用于用户从多个选项中选择的交互元素。在 Element UI 中,`el-select` 组件支持单选和多选模式,并允许自定义样式和行为。 重构通常涉及到改进代码结构...

    select下拉框支持搜索并可多选

    `fSelect.js` 是一个可能用于实现这个功能的JavaScript文件,它可能包含了自定义的下拉框选择器,提供了搜索和多选的逻辑。JavaScript库如jQuery(`jquery-1.11.3.min.js`)通常被用来简化DOM操作,处理事件监听和...

    js多选下拉框多选下拉框多选下拉框

    JavaScript(简称js)作为客户端脚本语言,常被用来增强网页的交互性,其中包括实现多选下拉框的功能。本文将深入探讨如何使用JavaScript来创建和操作多选下拉框。 首先,HTML基础是构建多选下拉框的起点。一个基本...

    select 下拉框可以多选

    综上所述,"select下拉框可以多选"涉及到HTML、CSS、JavaScript基础,以及可能的库和插件的使用,还有无障碍性设计。掌握这些知识点能帮助开发者创建功能丰富、用户体验良好的多选下拉框。在压缩包文件中的"select...

    实现select多选插件

    5. **API接口**:提供API方法,如`selectAll`、`deselectAll`、`toggleOption`等,方便在代码中控制多选状态。 6. **可访问性**:确保插件符合Web无障碍标准(WCAG),让所有用户都能使用,包括使用辅助技术的用户...

    select 实现多选

    本篇文章将深入探讨如何在HTML、CSS以及JavaScript中实现`&lt;select&gt;`的多选特性。 ### HTML基础 在HTML中,`&lt;select&gt;`元素有一个名为`multiple`的属性,当这个属性被设置时,用户就可以同时选择多个选项。例如: `...

    js实现的多选城市

    在这个场景中,"js实现的多选城市"是指使用JavaScript技术来创建一个功能,允许用户在选择多个城市时实现级联效果。级联城市通常指的是当用户在一个下拉框中选择一个特定的城市后,另一个下拉框会自动更新,显示与所...

    下拉多选select multiple

    在网页设计和开发中,"下拉多选select multiple"是一种常见的交互元素,它允许用户在下拉菜单中选择一个或多个选项。Bootstrap框架提供了一种优雅的方式来实现这样的功能,同时增强了用户体验,尤其是在数据量较大时...

    前端web select 多层级选择。利用 ztree.js 实现下拉框的多选和单选demo.有兴趣的可以了解一下。

    其中,`check` 参数用于控制多选和单选功能,如 `check.enable` 设为 `true` 可开启多选,`check.chkStyle` 可设置为 `"radio"` 或 `"checkbox"` 分别实现单选或多选。同时,`select` 参数可以配置选择后的效果,如...

    layui多选下拉框样式,整套layui-select-multiple

    通常,你需要引入layui的基础样式文件(如`layui.css`)和核心JS文件(如`layui.all.js`),以及对应的组件JS文件(如`layui.select.js`)。 综上所述,Layui的“layui-select-multiple”提供了一整套美观且功能...

    select模拟多选下拉

    在网页开发中,"select模拟多选下拉"是一个常见的需求,特别是在需要用户选择多个选项时。传统的HTML `&lt;select&gt;` 元素虽然支持`multiple`属性实现多选,但其样式和交互方式往往不能满足现代网页设计的需求。因此,...

Global site tag (gtag.js) - Google Analytics