`

select 左右多选 demo js

阅读更多
<script type="text/javascript">
// submit
     $(function(){
       $("#id_save").click(function(){
        if(chkform()){
        // alert('submit()');
        $("form").attr("action","<%=request.getContextPath()%>/tmlportal/tml_saveUserDefinedTmlGroupMember.action");
        $("form").submit();
     }
    else{
     return false;
   }
    });
   });
    //check  the input value;
function chkform() {
var selFlag = false;
$("#rightmodel option").each(function(){
if($(this).val() != ""){
// if  this value is not null, attr this selected to selected;
$(this).attr("selected","selected");
selFlag = true;
}
});
//
if(!selFlag) {
alert("必须选择一个终端!");
return false;
}
return selFlag;

}
// remove  left  option to right;
function leftToRight(){
   //leftmodel
var leftmodel = document.getElementById("leftmodel");
//rightmodel
var rightmodel = document.getElementById("rightmodel");
if(leftmodel.length>0){
    // 判读 有没有被选中一个 option。
var leftSelectedIndex = leftmodel.selectedIndex;
if(leftSelectedIndex<0){
option = leftmodel.options(0);
rightmodel.appendChild(option);
}

if(leftSelectedIndex>=0){
  //leftmodel length
    var leftLength = leftmodel.length;
    var i=0;
       for(i;i<leftLength;i++){
         if(leftmodel[i].selected){
           option = leftmodel.options(i);
           rightmodel.appendChild(option);
           repeat();
           // 当移除 选中时,对象长度减少一个。
           leftLength--;
           i--;
         }
        
       }
      
   }//if leftSelectedIndex>=0

// rightmodel.selectedIndex=-1;
this.repeat();

}// 长度 大于0


    }
    // remove all left options  to right sw
function leftToRightAll(){
var leftmodel = document.getElementById("leftmodel");
var rightmodel = document.getElementById("rightmodel");
while(leftmodel.length>0){
rightmodel.appendChild(leftmodel.options(0));
}
this.repeat();
}
// remove right option to left;
function rightToLeft(){

var leftmodel = document.getElementById("leftmodel");
var rightmodel = document.getElementById("rightmodel");
if(rightmodel.length>0){

var rightSelectedIndex = rightmodel.selectedIndex;
if(rightSelectedIndex<0){
rightSelectedIndex=0;
option = rightmodel.options(rightSelectedIndex);
leftmodel.appendChild(option);
}
if(rightSelectedIndex>=0){
     //leftmodel length
    var rightLength = rightmodel.length;
    var i=0;
       for(i;i<rightLength;i++){
         if(rightmodel[i].selected){
           option = rightmodel.options(i);
           leftmodel.appendChild(option);
           repeat2();
           // 当移除 选中时,对象长度减少一个。
           rightLength--;
           i--;
         }
        
       }
}

// leftmodel.selectedIndex=-1;
this.repeat2();

}// rightmodel.length>0

}
// remove  all right options to  left;
function rightToLeftAll(){
var leftmodel = document.getElementById("leftmodel");
var rightmodel = document.getElementById("rightmodel");
while(rightmodel.length>0){
leftmodel.appendChild(rightmodel.options(0));
}
repeat2();
}

  // remove repets
    function repeat(){
     var middlemodel = document.getElementById("rightmodel");
     var ops=middlemodel.options;
     for(var i=0;i<ops.length;i++){
     for(var j=i+1;j<ops.length;j++){
     if(ops[i].value==ops[j].value){
      middlemodel.removeChild(ops[j]);
     j=j-1;   
     }   
     }
     }    
     }
 
    // remove repets two
    function repeat2(){
     var middlemodel = document.getElementById("leftmodel");
     var ops=middlemodel.options;
     for(var i=0;i<ops.length;i++){
     for(var j=i+1;j<ops.length;j++){
     if(ops[i].value==ops[j].value){
      middlemodel.removeChild(ops[j]);
     j=j-1;   
     }   
     }
     }    
     }
    
// back
$(function(){
$("#id_back").click(function(){
window.history.back();
});
}); 

// tml by brand
$("#id_brand").change(function(){
   var brandindex = $(this).val();
   $.post("<%=request.getContextPath()%>/tmlportal/tml_queryTmlBybrand.action",{brandindex:brandindex},function(data){
     var $tmlObj = $("#leftmodel").empty();
     $.each(data,function(index,content){
    var $terminalindex = content['terminalindex'];
    var $terminalmodelname = content['terminalmodelname'];
     var option = $("<option value="+$terminalindex+">"+$terminalmodelname+"</option>").appendTo($tmlObj);;
    //
    // tmlObj.appendChild(option);
    });
   },'json');
});
  // form's history value;
$(document).ready(function(){
    var brandindex = $("#brandindexBak").val();
    $("#id_brand option[value = "+brandindex+"]").attr("selected","selected");
    var status = ${mtmlGroup.status}
   $("#id_status option[value = "+status+"]").attr("selected","selected");
   //
   if(!clearNullOption()){
     $("#rightmodel").empty();
   }
});
//query  by  tmlName
$("#query").click(function(){
var terminalmodelname = $("#id_terminalmodelname").val();
$.post("<%=request.getContextPath()%>/tmlportal/tml_queryTmlByName.action",{terminalmodelname:terminalmodelname},function(data){
     var $tmlObj = $("#leftmodel").empty();
     $.each(data,function(index,content){
    var $terminalindex = content['terminalindex'];
    var $terminalmodelname = content['terminalmodelname'];
     var option = $("<option value="+$terminalindex+">"+$terminalmodelname+"</option>").appendTo($tmlObj);;
    });
   },'json');
});
// clear form
$("#clear").click(function(){
$("input[name='terminalmodelname']").val('');
});
// 加载时,判断 此终端组 是否有终端,如果没有则将  空的option  给清空了。
function clearNullOption() {
var selFlag = false;
$("#rightmodel option").each(function(){
if($(this).val() != ""){
$(this).attr("selected","selected");
selFlag = true;
}
});
//
if(!selFlag) {
return false;
}
return selFlag;
}
  // 回车事件 查询 功能。
    // 回车事件 查询 功能。
  $(document).keydown(function(e){
   if(e.keyCode==13){ //当按键是回车
     var act = document.activeElement.id;//获得当前获得焦点控件的ID 
     switch(act)
     {
     case 'id_terminalmodelname':  $("#query").click();  break;
    //  default :  $("#id_query").click(); break;
     }
  }       
});
</script>
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    layui-多选下拉框-xm-select-demo源码

    1. 引入layui库和xm-select插件的CSS及JS文件,确保页面头部正确加载。 2. 在HTML中创建基本的select元素,设置必要的属性,如id、name、多选属性等。 3. 使用layui的API初始化xm-select组件,通过配置项调整组件的...

    select多选与美化

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

    xmselect日期多选组件

    在"xmselect日期多选组件demo"中,我们可以看到该组件的实例展示,它提供了直观的交互和良好的用户体验。 "日期多选"是该组件的核心特性,意味着用户可以同时选择多个日期,而不局限于单个日期选择。这种功能对于...

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

    在本教程中,我们将深入探讨如何利用 zTree.js 实现下拉框的多选和单选功能。 首先,zTree.js 提供了丰富的 API 和配置选项,使得我们可以自定义树状结构的显示样式、交互行为等。在创建 zTree 时,我们需要提供 ...

    xm-select,一款简单多选的select插件

    只需要引入必要的CSS和JS文件,通过简单的配置,就能实现一个功能完备的多选下拉框。在描述中提到,文件包含了DEMO,这对于初学者来说,是一个很好的学习起点,可以通过查看和运行示例代码快速理解插件的工作原理和...

    多选列表的demo

    在IT领域,多选列表(Multiple Select List)是一种常见的用户界面元素,用于让用户从一系列选项中选择多个项目。这种交互方式广泛应用于各种软件、网站和应用程序中,为用户提供了一种高效的方式来选择他们感兴趣的...

    select多选 multiple的使用示例

    本示例主要讲解如何使用`&lt;select&gt;`的`multiple`属性创建一个多选下拉框,并通过JavaScript来处理用户的选择。 首先,`&lt;select&gt;`标签的`multiple`属性是关键,它告诉浏览器该下拉列表支持多选。例如: ```html ...

    select2(jquery)插件下载

    - `js`: 此目录可能包含Select2的JavaScript文件,如`select2.min.js`,这是运行Select2插件所必需的脚本。 - `select2-4.0.0`: 这表示Select2的版本号为4.0.0,其中可能包含完整的库文件、文档和其他资源。 **...

    jQuery And Select2 Demo.zip

    综上所述,"jQuery And Select2 Demo.zip"这个项目展示了如何结合使用jQuery和Select2来创建一个功能强大的多选下拉框,这在现代Web开发中非常有用。通过学习这个示例,你可以更好地理解如何提升网页的交互性和用户...

    select2的几种demo

    1. **基本使用**:`select2`通过简单的HTML和JavaScript就可以快速应用到现有的`&lt;select&gt;`元素上,只需引入CSS和JS文件,然后调用初始化方法即可。 2. **多选**:`select2`支持多选模式,用户可以同时选择多个选项...

    select下拉菜单美化demo

    7. **多选支持**:有些情况下,`&lt;select&gt;`需要支持多选功能,此时`&lt;select multiple&gt;`属性会被使用。在美化时,需要考虑如何优雅地显示和管理多个选中的选项。 在`readme.md`文件中,通常会包含关于Demo的介绍、...

    angularjs中select2使用 demo

    这个"angularjs中select2使用demo"应该是一个示例项目,展示了如何在AngularJS应用中集成和使用Select2。 首先,让我们了解AngularJS和Select2的基础知识。AngularJS是由Google维护的一个JavaScript框架,用于构建...

    bootstrap select2插件使用demo

    Bootstrap Select2的使用首先需要确保已经引入了Bootstrap的基本样式库(CSS)和JavaScript库,以及Select2的特定CSS和JS文件。通常,你需要在页面的`&lt;head&gt;`部分引入Bootstrap CSS和Select2 CSS,然后在`&lt;body&gt;`的...

    Bootstrap-selectpicker多选框插件的demo源码

    在这个"Bootstrap-selectpicker多选框插件的demo源码"中,我们可以学习到如何在项目中集成和使用这个插件。 首先,Bootstrap-selectpicker提供了多选功能,允许用户在下拉菜单中选择多个选项。这在需要用户输入一组...

    Layuiselect多选小插件

    《基于Layui的select多选插件:Layui-formSelects详解》 在Web开发中,表单元素的使用是不可或缺的一部分,其中选择框(Select)在数据输入和筛选时发挥着重要作用。然而,原生的HTML Select在功能上存在一定的局限...

    select2demo

    2. **多选支持**:除了基本的单选模式,Select2还支持多选,允许用户选择多个选项。 3. **自定义数据源**:Select2可以绑定到各种数据源,如静态数组、Ajax请求返回的数据或复杂的API接口,使得动态加载数据变得简单...

    select2.js插件支持拼音搜索(最新版-4.0.6)Demo

    《select2.js插件支持拼音搜索(最新版-4.0.6)Demo》 在当前的Web开发中,交互性和用户体验是至关重要的。为了提升这些方面,许多开发者选择使用JavaScript库来增强HTML元素,例如下拉选择框。select2.js就是其中...

    下拉多选控件CheckboxSelect_v2.8.8

    《原生JavaScript实现的下拉多选控件CheckboxSelect_v2.8.8详解》 在Web开发中,下拉多选控件是常见的交互元素,它能够为用户提供方便的选择多个选项的功能。CheckboxSelect_v2.8.8是一款基于原生JavaScript编写的...

    前端 layui-fromSelects 下拉框多选,搜索

    在本主题中,我们主要探讨的是如何利用 Layui 实现一个功能完备的下拉框选择器,支持多选、搜索以及反选功能。 一、Layui Form Selects Layui 的 Form Selects 是一个强大的下拉选择组件,它不仅提供了基本的单选...

    Jquery多选下拉列表插件jquery multiselect

    jQuery Multiselect是由Luis Almeida开发的一个开源插件,它基于jQuery库,可以将传统的多选`&lt;select&gt;`元素转换为一个可定制、交互性强的多选下拉框。通过这个插件,你可以轻松地实现分组、搜索、排序等高级功能,...

Global site tag (gtag.js) - Google Analytics