<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Select下拉列表框进行多选、移除、交换内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body style="font-size:12px">
<form name="form1" method="post" action="">
<table width="380" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="150">
<table width="150" border="0" cellpadding="1" cellspacing="1" bgcolor="#CAFAFC">
<tr>
<td height="25" background="/electbg.jpg" bgcolor="#FFFFFF"> 请选择：</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">
<select name="sel_place1" size="6" multiple id="sel_place1" style="width:100px " >
<option value="sel1">江苏省</option>
<option value="sel2">广东省</option>
<option value="sel3">河南省</option>
<option value="sel4">吉林省</option>
<option value="sel5">浙江省</option>
</select>
</td>
</tr>
</table></td>
<td width="80" align="center" valign="bottom">
<input name="sure1" type="button" id="sure1" onClick="allsel(document.form1.sel_place2,document.form1.sel_place1);" value="<<">
<input name="sure2" type="button" id="sure2" onClick="allsel(document.form1.sel_place1,document.form1.sel_place2);" value=">>" align="center" height="2">
</td>
<td width="150">
<table width="150" border="0" cellpadding="1" cellspacing="1" bgcolor="#CAFAFC">
<tr>
<td height="25" background="/selectbg.jpg" bgcolor="#FFFFFF"> 已选择：</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">
<select name="sel_place2" size="6" multiple id="sel_place2" style="width:100px "> </select>
</td>
</tr>
</table></td>
</tr>
</table>
</br></br>
<center>
<input type="button" id="btn1" onClick="submitForm();" value="提交">
</center>
</form>
<script language="javascript">
function allsel(n1,n2)
{
while(n1.selectedIndex!=-1)
{
var indx=n1.selectedIndex;
var t=n1.options[indx].text;
var v=n1.options[indx].value;
n2.options.add(new Option(t,v));
n1.remove(indx);
}
}
//提交存值
function submitForm(){
n2 = document.form1.sel_place2;
n2_len= n2.options.length;
var n2_val='';
for(i=0;i<n2_len;i++){
n2_val+=n2.options[i].value;
if(i!=n2_len-1){
n2_val+='|';
}
}
alert(n2_val);//存值：例如：
}
//初始化反显 dfzhao
window.onload = function() {
n1 = document.form1.sel_place1;
n2 = document.form1.sel_place2;
init_val='sel1|sel5|sel3';
init_arra=init_val.split("|");
for (var i=0;i<init_arra.length ;i++ ) {
for(var x=0; x<n1.options.length ;x++){
if(init_arra[i]==n1.options[x].value){
n2.options.add(new Option(n1.options[x].text,n1.options[x].value));
n1.remove(x);
}
}
}
}
</script>
</body>
</html>
分享到：
相关推荐
在IT领域，尤其是在前端开发中，"SelectBox下拉复选框多选插件"是一种常用的用户界面元素，用于提供用户友好的多选项选择功能。它结合了传统的下拉列表和复选框的特性，使得在有限的空间内，用户能够方便地筛选和...
在实际应用中，我们可能会遇到需要对SELECT下拉列表进行复杂操作的情况，比如实现多选、移除或交换内容等。下面将详细介绍如何使用JavaScript来实现这些功能。 首先，我们需要了解SELECT元素的基本结构。一个基本的...
vue-select 多选下拉列表，建议用火狐或者谷歌浏览器打开，低版本IE对vue兼容性不好
基于Layui下拉选择框的多选解决方案；前身前往formSelectes, 由于渲染速度慢, 代码冗余, 被放弃了；xm-select使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展
在实际应用中，我们可能还需要对`select`下拉框进行样式定制，以提供更好的用户体验。这通常需要借助CSS。例如，我们可以修改下拉框的宽度、高度，以及选项的显示方式： ```css select[multiple] { width: 200px; ...
在网页设计中，`<select>`元素通常用于创建下拉列表，它允许用户从一组预定义的选项中进行选择。然而，传统的`<select>`标签并不支持直接在选项中显示图片，只支持纯文本内容。但随着现代Web技术的发展，我们可以...
总之，Bootstrap Select是一个强大的下拉选择组件，它结合了Bootstrap的风格和实用功能，适用于创建具有搜索、多选功能的下拉列表，对于提高用户在网页上的操作效率具有显著作用。通过以上介绍，你应该已经对如何...
在IT领域，尤其是在Web开发和UI设计中，创建具有多选功能的下拉列表框是一项常见的需求。传统的下拉列表通常只允许用户选择一个选项，但通过自定义和扩展，我们可以实现一个支持多选的下拉列表框。下面将详细讨论这...
原生select实现多选功能
select多选下拉列表+模糊查询功能，亲测完整，有ASP和HTML样例，代码完整。 <!DOCTYPE html> <title>Insert title here</title> <script src="jquery.min.js"></script> ...
多选下拉列表在数据筛选、设置配置或者进行多值选择时非常实用。本篇文章将深入探讨这一主题，包括复选下拉列表、jQuery多选列表以及多级联动的实现。 首先，我们来看**多选下拉列表**的基本概念。在HTML中，`...
Select下拉列表框CssJavascriptCssJavascriptCssJavascript
下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选...
`div模拟select自定义下拉列表框`是一种常见做法，它利用JavaScript（如jQuery）和CSS来实现，可以提供比原生`<select>`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...
本资源"JS实现可点击添加删除的下拉列表框多选标签控件源码.zip"提供了一个利用JavaScript实现的交互式下拉列表框，其中包含了多选功能以及标签展示的效果。这个控件允许用户不仅可以选择多个选项，还可以通过点击来...
"进行模糊查询+多选功能的下拉框（select） 模糊加载"是一个针对前端表单元素优化的实践，旨在提供更好的用户体验。传统的HTML `<select>` 元素虽然简单易用，但其功能相对有限，无法满足复杂的用户需求，例如模糊...
在网页设计和开发中，"select下拉多选框"是一种常见的用户界面元素，用于让用户在一组选项中选择一个或多个值。这个组件通常被称为`<select>`元素，当配合`multiple`属性时，它就能支持多选功能，即mulitselect。...
在美化select多选框时，我们可以通过jQuery选择器找到对应的DOM元素，然后绑定事件，动态添加或移除选项，以及控制显示和隐藏。 2. **CSS美化**：CSS（层叠样式表）用于控制网页的布局和外观。对于select多选框，...