<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>
分享到:
相关推荐
1. 引入layui库和xm-select插件的CSS及JS文件,确保页面头部正确加载。 2. 在HTML中创建基本的select元素,设置必要的属性,如id、name、多选属性等。 3. 使用layui的API初始化xm-select组件,通过配置项调整组件的...
总之,"select多选与美化"涉及了HTML、CSS、JavaScript和jQuery的综合应用,目标是创建一个功能齐全、美观且兼容性强的多选下拉列表,提升用户在网页交互中的体验。通过学习和实践,开发者可以掌握这种常见但又重要...
在"xmselect日期多选组件demo"中,我们可以看到该组件的实例展示,它提供了直观的交互和良好的用户体验。 "日期多选"是该组件的核心特性,意味着用户可以同时选择多个日期,而不局限于单个日期选择。这种功能对于...
在本教程中,我们将深入探讨如何利用 zTree.js 实现下拉框的多选和单选功能。 首先,zTree.js 提供了丰富的 API 和配置选项,使得我们可以自定义树状结构的显示样式、交互行为等。在创建 zTree 时,我们需要提供 ...
只需要引入必要的CSS和JS文件,通过简单的配置,就能实现一个功能完备的多选下拉框。在描述中提到,文件包含了DEMO,这对于初学者来说,是一个很好的学习起点,可以通过查看和运行示例代码快速理解插件的工作原理和...
在IT领域,多选列表(Multiple Select List)是一种常见的用户界面元素,用于让用户从一系列选项中选择多个项目。这种交互方式广泛应用于各种软件、网站和应用程序中,为用户提供了一种高效的方式来选择他们感兴趣的...
本示例主要讲解如何使用`<select>`的`multiple`属性创建一个多选下拉框,并通过JavaScript来处理用户的选择。 首先,`<select>`标签的`multiple`属性是关键,它告诉浏览器该下拉列表支持多选。例如: ```html ...
- `js`: 此目录可能包含Select2的JavaScript文件,如`select2.min.js`,这是运行Select2插件所必需的脚本。 - `select2-4.0.0`: 这表示Select2的版本号为4.0.0,其中可能包含完整的库文件、文档和其他资源。 **...
综上所述,"jQuery And Select2 Demo.zip"这个项目展示了如何结合使用jQuery和Select2来创建一个功能强大的多选下拉框,这在现代Web开发中非常有用。通过学习这个示例,你可以更好地理解如何提升网页的交互性和用户...
1. **基本使用**:`select2`通过简单的HTML和JavaScript就可以快速应用到现有的`<select>`元素上,只需引入CSS和JS文件,然后调用初始化方法即可。 2. **多选**:`select2`支持多选模式,用户可以同时选择多个选项...
7. **多选支持**:有些情况下,`<select>`需要支持多选功能,此时`<select multiple>`属性会被使用。在美化时,需要考虑如何优雅地显示和管理多个选中的选项。 在`readme.md`文件中,通常会包含关于Demo的介绍、...
这个"angularjs中select2使用demo"应该是一个示例项目,展示了如何在AngularJS应用中集成和使用Select2。 首先,让我们了解AngularJS和Select2的基础知识。AngularJS是由Google维护的一个JavaScript框架,用于构建...
Bootstrap Select2的使用首先需要确保已经引入了Bootstrap的基本样式库(CSS)和JavaScript库,以及Select2的特定CSS和JS文件。通常,你需要在页面的`<head>`部分引入Bootstrap CSS和Select2 CSS,然后在`<body>`的...
在这个"Bootstrap-selectpicker多选框插件的demo源码"中,我们可以学习到如何在项目中集成和使用这个插件。 首先,Bootstrap-selectpicker提供了多选功能,允许用户在下拉菜单中选择多个选项。这在需要用户输入一组...
《基于Layui的select多选插件:Layui-formSelects详解》 在Web开发中,表单元素的使用是不可或缺的一部分,其中选择框(Select)在数据输入和筛选时发挥着重要作用。然而,原生的HTML Select在功能上存在一定的局限...
2. **多选支持**:除了基本的单选模式,Select2还支持多选,允许用户选择多个选项。 3. **自定义数据源**:Select2可以绑定到各种数据源,如静态数组、Ajax请求返回的数据或复杂的API接口,使得动态加载数据变得简单...
《select2.js插件支持拼音搜索(最新版-4.0.6)Demo》 在当前的Web开发中,交互性和用户体验是至关重要的。为了提升这些方面,许多开发者选择使用JavaScript库来增强HTML元素,例如下拉选择框。select2.js就是其中...
《原生JavaScript实现的下拉多选控件CheckboxSelect_v2.8.8详解》 在Web开发中,下拉多选控件是常见的交互元素,它能够为用户提供方便的选择多个选项的功能。CheckboxSelect_v2.8.8是一款基于原生JavaScript编写的...
在本主题中,我们主要探讨的是如何利用 Layui 实现一个功能完备的下拉框选择器,支持多选、搜索以及反选功能。 一、Layui Form Selects Layui 的 Form Selects 是一个强大的下拉选择组件,它不仅提供了基本的单选...
jQuery Multiselect是由Luis Almeida开发的一个开源插件,它基于jQuery库,可以将传统的多选`<select>`元素转换为一个可定制、交互性强的多选下拉框。通过这个插件,你可以轻松地实现分组、搜索、排序等高级功能,...