`

js 两个select的值传递

阅读更多
转载:http://hi.baidu.com/javajavajava/blog
<!--
   部门
   -->
<script type="text/javascript"> 
function getSelectedDepartmentValue(){
   var temp=""; 
   var obj2=document.addNotice.selectDepartment;
   var length=obj2.options.length;
   for(i=0;i<length-1;i++){
    value = obj2[i].value;
    text = obj2[i].text; 
    temp+=value+"|";
   }
   if(length>0){
    temp = temp + obj2[length-1].value;
   }
   document.addNotice.departments.value = temp; 
   alert(document.addNotice.departments.value);
}
function addDepartmentElem(){
   var obj1=document.addNotice.allDepartment;
   var obj2=document.addNotice.selectDepartment;
   var length1=obj1.options.length;
   var arr=new Array(length1);
   for(var loop=0;loop<obj1.options.length;loop++){  
     var count=0;
     for(var index=0;index<obj2.options.length;index++) {
      if(obj2.options[index].value==obj1.options[loop].value)
      {
       count++;
       break;
      }
     } 
     if(count==0){    
      if(obj1.options[loop].selected) {
       var option=document.createElement("option");
       option.text=obj1.options[loop].text;
       option.value=obj1.options[loop].value;
       obj2.options.add(option);
      }
     }    
    }    
}
function removeDepartmentElem(){
   var obj2=document.addNotice.selectDepartment;
   var length=obj2.options.length;
   for(var i=obj2.options.length-1;i>=0;i--){
    if(obj2.options[i].selected){
     obj2.options.remove(i);
    }
   }
}
</script>

<sql:setDataSource
       url="jdbc:oracle:thin:@192.168.1.108:1521:hqh"
       driver="oracle.jdbc.driver.OracleDriver" user="scott"
       password="tiger" var="mydb" />

<form method="post" action="AddNotice" name="addNotice" 
    style="margin-left: 30;" onsubmit="return checkValues(this);">

<sql:query var="rs" dataSource="${mydb}" 
      sql="select * from HR_DEPARTMENT_DATA" />
      <table align="center" width="80%">
      <caption>请选择部门</caption>
      <tr>
       <td align="right" width="40%">
       <select name="allDepartment" size="8" style="width: 80%" multiple="multiple">
        <c:forEach items="${rs.rows}" var="department">
         <option value="${department.departmentId }">${department.name }</option>
        </c:forEach>
       </select>
       </td>
       <td width="20%" align="center">
        <input type="button" value=">>" onclick="addDepartmentElem();">
           <br>
           <br>
        <input type="button" value="<<" onclick="removeDepartmentElem()">
       </td>
       <td align="left" width="40%">
        <select name="selectDepartment" id="selectDepartment" size="8" style="width: 80%" multiple="multiple"></select>
       </td>
      </tr>
      </table>

分享到:
评论

相关推荐

    jquery select 选中值设置左右select选择互换

    本话题聚焦于使用jQuery来实现两个select元素之间的选中值互换功能。这对于用户界面设计,尤其是在需要双向联动或者数据交换的场景下,是一个实用的功能。 首先,我们要了解HTML中的`&lt;select&gt;`元素。它是创建下拉...

    JSP+AJAX实现两级select联动 代码

    要实现这样的功能,我们首先需要在JSP中设置两个select元素,并用JavaScript绑定事件监听器。当第一个select的值改变时,触发AJAX请求。请求的URL通常是一个后台处理程序,由JSP编写,负责从数据库(这里是MySQL)中...

    jquery 操作两个select实现值之间的互相传递

    在本文中,我们将深入探讨如何利用 jQuery 来操作两个 `&lt;select&gt;` 元素,实现值之间的互相传递。这对于构建动态表单或者需要用户交互选择的界面非常有用。 首先,我们需要理解 `&lt;select&gt;` 元素在 HTML 中的作用。`...

    使用select2实现下拉列表动态模糊查询

    在这个压缩包中,我们有`select2.min.css`(样式文件)和`select2.min.js`(JavaScript 文件)。将这两个文件放入你的项目目录,并在HTML文件中引用它们。例如,在`&lt;head&gt;` 标签内添加: ```html &lt;link href="...

    Angularjs 根据一个select的值去设置另一个select的值方法

    在提供的代码片段中,我们可以看到有两个控制器:mySelectController 和 myRelationController。第一个控制器负责处理第一个 select 元素的变化,并根据选择项的不同来定义或修改 $rootScope 中的 relationList 对象...

    使用Select控件实现联动效果的ASP实例 安徽机电职业技术学院陈伟

    首先,我们需要创建两个Select控件,分别代表省份和城市。HTML代码可能如下: ```html &lt;select id="province" name="province" onchange="loadCities(this.value)"&gt; &lt;!-- 省份选项 --&gt; &lt;/select&gt; &lt;select id=...

    select2ztree.zip

    今天,我们将深入探讨如何利用Select2和jQuery-ZTree这两个强大的JavaScript库,构建功能丰富的树形下拉框。这种组件在数据层次结构展示、多级选择等方面有着广泛的应用,如在系统配置、权限管理等场景中。 首先,...

    angularjs ui-select2 多选下拉所需资源文件

    在本文中,我们将深入探讨...通过理解这两个库的工作原理以及如何进行数据绑定和事件处理,你可以为你的应用提供更优秀的用户体验。同时,灵活的配置选项和自定义能力允许你在满足项目需求的同时保持代码的可维护性。

    select下拉框添加搜索功能

    在`select`下拉框中实现搜索功能,一般有两种常见方法:一种是原生HTML和JavaScript的实现,另一种是借助第三方库,如本例中的`jquery.editable-select`。 1. **原生HTML和JavaScript实现**: 使用原生方式需要...

    组合element里面的select和tree实现的treeSelect选择器

    6. **事件传播**:为了让父组件知道当前选中的值,你需要在`SelectTree`组件中触发自定义事件,如`on-change`,并将选中的值作为参数传递。 7. **样式定制**:为了与现有应用风格保持一致,你可能还需要对组件样式...

    Javascript传递参数到action类,多个字符传递

    在给定的代码片段中,`functionlistQuery()` 和 `functionpageQuery(pageNo)` 这两个函数展示了如何在JavaScript中通过修改`window.location.href`属性来构建一个包含多个查询参数的URL。这里的关键在于使用了字符串...

    select2插件相关资源.zip

    在“select2.full.min.js”和“select2.min.css”这两个文件中,包含了Select2的核心JavaScript库和样式表,它们是实现Select2功能的基础。 **核心功能** 1. **美化默认样式**:Select2通过自定义CSS样式,使原本...

    两个select多选模式的选项相互移动(示例代码)

    标题中的"两个select多选模式的选项相互移动(示例代码)"是指在HTML网页中,有两个`&lt;select&gt;`元素,它们都设置了`multiple`属性,允许用户选择多个选项。这个功能通常用于用户需要在两个列表之间转移选项的场景,比如...

    bootstrap select2使用总结

    minimumInputLength: 2, // 用户输入至少两个字符后发起请求 ajax: { url: "system/findUsersByCondition", dataType: 'json', data: function (term, page) { return { realName: term // 传递用户的输入...

    jQuery取得select选择的文本与值的示例

    在实际的Web页面应用中,有时需要获取两个表单中的值,并且可能需要将一个选择框中的选中值传递到另一个选择框中。这可以通过jQuery来实现: ```javascript var item = $("#select1").val(); // 获取select1的所有...

    ChosenSelect_美化H5Select选择框_

    这两个文件分别用于非压缩和压缩的场景。`chosen.css`是源码版本,方便开发者查看和定制样式,而`chosen.min.css`是经过压缩的版本,适用于生产环境,以减少页面加载时间。 接下来是JavaScript部分,Chosen提供了...

    js select多选列表传值代码

    主要关注以下两个方面:从一个`select`列表移动选中项到另一个`select`列表,以及清除选中项。 首先,我们有两个`select`元素,一个表示左侧的源列表(通常有更多的选项),另一个是右侧的目标列表。我们的目标是...

    jQuery取得设置清空select选择的文本与值

    2. **设置选中值**:`$("#ddlregtype").attr("value", "normal")`或`$("#ddlregtype").val("normal")`,这两种方式都可以改变`&lt;select&gt;`的`value`属性,使其与指定的字符串匹配。 3. **设置选中文本**:设置文本相对...

    两个select之间option的互相添加操作(jquery实现)

    在Web开发中,经常需要实现两个下拉列表(select元素)中选项(option元素)的相互添加或移动操作。这种操作可以通过纯JavaScript或jQuery来实现。上述内容提供了一个使用jQuery实现该功能的插件示例。以下详细介绍...

    Vue.js做select下拉列表的实例(ul-li标签仿select标签)

    在示例中,有两个`my-select`组件被创建,它们分别绑定到`data1`和`data2`数据数组。这两个组件都是通过Vue.js的`Vue.component`方法进行全局注册的。每个`my-select`组件内包含一个`input`元素和一个`my-ul`子组件...

Global site tag (gtag.js) - Google Analytics