`
八贤王
  • 浏览: 40114 次
社区版块
存档分类
最新评论

Select下拉列表框进行多选、移除、交换内容(包括修改反显)

    博客分类:
  • js
阅读更多
<!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="<<">  &nbsp;
<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>
分享到:
评论

相关推荐

    SelectBox下拉复选框多选插件

    在IT领域,尤其是在前端开发中,"SelectBox下拉复选框多选插件"是一种常用的用户界面元素,用于提供用户友好的多选项选择功能。它结合了传统的下拉列表和复选框的特性,使得在有限的空间内,用户能够方便地筛选和...

    js Select下拉列表框进行多选、移除、交换内容的具体实现方法

    在实际应用中,我们可能会遇到需要对SELECT下拉列表进行复杂操作的情况,比如实现多选、移除或交换内容等。下面将详细介绍如何使用JavaScript来实现这些功能。 首先,我们需要了解SELECT元素的基本结构。一个基本的...

    vue-select 多选下拉列表

    vue-select 多选下拉列表,建议用火狐或者谷歌浏览器打开,低版本IE对vue兼容性不好

    基于Layui, 下拉选择框的多选解决方案

    基于Layui下拉选择框的多选解决方案;前身前往formSelectes, 由于渲染速度慢, 代码冗余, 被放弃了;xm-select使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展

    select下拉列表显示图片内容

    在网页设计中,`&lt;select&gt;`元素通常用于创建下拉列表,它允许用户从一组预定义的选项中进行选择。然而,传统的`&lt;select&gt;`标签并不支持直接在选项中显示图片,只支持纯文本内容。但随着现代Web技术的发展,我们可以...

    原生select实现多选功能

    原生select实现多选功能

    bootstrap-select下拉选择搜索框,可以多选和单选

    总之,Bootstrap Select是一个强大的下拉选择组件,它结合了Bootstrap的风格和实用功能,适用于创建具有搜索、多选功能的下拉列表,对于提高用户在网页上的操作效率具有显著作用。通过以上介绍,你应该已经对如何...

    具有多选功能的下拉列表框

    在IT领域,尤其是在Web开发和UI设计中,创建具有多选功能的下拉列表框是一项常见的需求。传统的下拉列表通常只允许用户选择一个选项,但通过自定义和扩展,我们可以实现一个支持多选的下拉列表框。下面将详细讨论这...

    select 下拉框可以多选

    在实际应用中,我们可能还需要对`select`下拉框进行样式定制,以提供更好的用户体验。这通常需要借助CSS。例如,我们可以修改下拉框的宽度、高度,以及选项的显示方式: ```css select[multiple] { width: 200px; ...

    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&gt; ...

    js多选下拉列表

    多选下拉列表在数据筛选、设置配置或者进行多值选择时非常实用。本篇文章将深入探讨这一主题,包括复选下拉列表、jQuery多选列表以及多级联动的实现。 首先,我们来看**多选下拉列表**的基本概念。在HTML中,`...

    Select下拉列表框

    Select下拉列表框CssJavascriptCssJavascriptCssJavascript

    下拉多选插件ySelect.js.rar

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

    div模拟select自定义下拉列表框(jQuery)

    `div模拟select自定义下拉列表框`是一种常见做法,它利用JavaScript(如jQuery)和CSS来实现,可以提供比原生`&lt;select&gt;`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...

    JS实现可点击添加删除的下拉列表框多选标签控件源码.zip

    本资源"JS实现可点击添加删除的下拉列表框多选标签控件源码.zip"提供了一个利用JavaScript实现的交互式下拉列表框,其中包含了多选功能以及标签展示的效果。这个控件允许用户不仅可以选择多个选项,还可以通过点击来...

    select下拉多选框

    在网页设计和开发中,"select下拉多选框"是一种常见的用户界面元素,用于让用户在一组选项中选择一个或多个值。这个组件通常被称为`&lt;select&gt;`元素,当配合`multiple`属性时,它就能支持多选功能,即mulitselect。...

    select多选下拉框美化

    在美化select多选框时,我们可以通过jQuery选择器找到对应的DOM元素,然后绑定事件,动态添加或移除选项,以及控制显示和隐藏。 2. **CSS美化**:CSS(层叠样式表)用于控制网页的布局和外观。对于select多选框,...

    进行模糊查询+多选功能的下拉框(select) 模糊加载

    "进行模糊查询+多选功能的下拉框(select) 模糊加载"是一个针对前端表单元素优化的实践,旨在提供更好的用户体验。传统的HTML `&lt;select&gt;` 元素虽然简单易用,但其功能相对有限,无法满足复杂的用户需求,例如模糊...

Global site tag (gtag.js) - Google Analytics