web前端左右选择框移动，及查询

当输入框输入信息进行查询时，若选择框中有则置顶且变亮，具体代码如下：

<!DOCTYPE html>
<html>
<head>

<!-- 选择框移动js -->
<script >
//选中添加到右边
function selectedToRight(){
    // 获取select2标签
    var select2 = document.getElementById("select2");
    // 获取select1标签
    var select1 = document.getElementById("select1");
    // 获取option
    var option1 = select1.getElementsByTagName("option");
    // 遍历
    for (var i=0;i<option1.length;i++) {
        var optioni = option1[i];
        //是否被选中
        if(optioni.selected == true){
            // 添加到select2里面
            select2.appendChild(optioni);
            //数组长度发生变化，需要处理
            i--;
        }
    }
}

// 选中添加到左边
function selectedToLeft(){
    // 获取select2标签
    var select2 = document.getElementById("select2");
    // 获取select1标签
    var select1 = document.getElementById("select1");
    // 获取option
    var option2 = select2.getElementsByTagName("option");
    // 遍历
    for (var i=0;i<option2.length;i++) {
        var optioni = option2[i];
        //是否被选中
        if(optioni.selected == true){
            // 添加到select1里面
            select1.appendChild(optioni);
            //数组长度发生变化，需要处理
            i--;
        }
    }
}

// 全部添加到右边
function allToRight(){
    // 获取select2标签
    var select2 = document.getElementById("select2");
    // 获取select1标签
    var select1 = document.getElementById("select1");
    // 获取option
    var option1 = select1.getElementsByTagName("option");
    // 遍历
    for (var i=0;i<option1.length;i++) {
        var optioni = option1[i];
        // 添加到select2里面
        select2.appendChild(optioni);
        //数组长度发生变化，需要处理
        i--;
    }
}


// 全部添加到左边
function allToLeft(){
    // 获取select2标签
    var select2 = document.getElementById("select2");
    // 获取select1标签
    var select1 = document.getElementById("select1");
    // 获取option
    var option2 = select2.getElementsByTagName("option");
    // 遍历
    for (var i=0;i<option2.length;i++) {
        var optioni = option2[i];
        // 添加到select1里面
        select1.appendChild(optioni);
        //数组长度发生变化，需要处理
        i--;

    }
}

//查询选择框
//元素id    搜索输入框id
function search(elementId,inputId){
	//获取搜索输入框中的内容
	var input = document.getElementById(inputId).value;
	if(input == ""){
		return;
	}
    var spl=input.toLowerCase();//将输入值转成小写  
    
    // 获取select标签
    var selectProjects=document.getElementById(elementId);     
     //获取select标签中所有的option子元素
    var options=selectProjects.options;     
    var total = -1;  
    var meetArray = new Array();     //查询到的option下标数组
    // 遍历  查询
    for(var i=0;i<options.length;i++){    
    	//取消已选择地option
    	selectProjects.options[i].selected = false;
    	
        var op_text=options[i].text.toLowerCase();//将option的文本转成小写  
        var opArray=op_text.split(spl);     
        if(spl.length>0 && opArray.length>1){  //匹配到了  
            total++;  
            meetArray[total]=i;  
        }  
    }     
    var beginIndex = 0;     
    for(var i=0;i<=total;i++){     
        var index = meetArray[i];     
        if(index!=beginIndex){     
        	//置顶  
            var tempText = options[index].text;     
            var tempValue = options[index].value;     
            options[index].text = options[beginIndex].text;     
            options[index].value = options[beginIndex].value;     
            options[beginIndex].text=tempText;     
            options[beginIndex].value=tempValue;     
        }     
        beginIndex++;  
        //option选中
        selectProjects.options[i].selected = true;  
        
    }  
    
}
</script>
<meta charset="UTF-8">
<title>左右选择框</title>
</head>
<body>
	<div >
	    <input type="text"  id="left" placeholder="请输入左边查询内容" >
	    <button id="search1" type="button"  onclick="search('select1','left')">查询左边</button>
		
		<input type="text"  id="right" placeholder="请输入右边查询内容" >
		<button id="search2" type="button" onclick="search('select2','right')">查询右边</button>
   </div>
	<div >
  		<div style="text-align: center">
		<div id="s1" style="float: left;">
			<select id="select1" multiple="multiple" style="width: 130px;height: 100px;overflow-y:auto;">
				<option>aa</option>
				<option>bb</option>
				<option>cc</option>
				<option>dd</option>
				<option>ee</option>
				<option>ff</option>
				<option>gg</option>
			</select>
		</div>
		<div style="float: left;">
			<input type="button" value=">>" onclick="selectedToRight();"/><br />
			<input type="button" value="全部选择" onclick="allToRight();"/><br />
			<input type="button" value="<<" onclick="selectedToLeft();"/><br />
			<input type="button" value="全部取消" onclick="allToLeft();"/>
        </div>
		<div id="s2" style="float: left;">
			<select id="select2" multiple="multiple" style="width: 130px;height: 100px;overflow-y:auto;">
			</select>
 		</div>    
	</div>
	</div>
</body>
</html>

如果需要得到后台传的数组集合来显示时，可加上ajax来实现，类似代码如下：

//显示编辑模态窗
function showEdit() {
	
	//清空缓存
    $("#select1").empty();
    $("#select2").empty();
	
    var id = $.trim($("#assemblyId").val());
   //通过ajax从后台拿到数据

    $.ajax({
        type: 'get',
        url: '/payAssembly/get/' + id,
        contentType: 'application/json',
        success: function (result) {//右边的option数据
                if(result！=null && result.length>0){  
                    //渲染右边选择框
                    var length =result.length;
		    for(var i=0;i<length;i++){
		        var option=document.createElement("option");
			$("#select2").append(option);
			option.value=result[i].id;  //每个option的位置
			option.text=result[i].payCode+":"+result[i].payName;//每个Option的值            
		    }
		    //自定义数组包含方法
		    Array.prototype.mycontains = function (obj) {  
		    	var i = this.length;  
		    	while (i--) {  
			    if (this[i].id == obj.id) {  
				return true;  
			    }  
		   	}  
			return false;  
		} 
		//渲染左边支付方式
		$.ajax({
			type: 'POST',
			url: '/payAssembly/getAllModes',
			contentType: 'application/json',
			success: function (data) {//得到左边的option数据，应先去除右边有的
				var length = data.length;
				for(var i=0;i<length;i++){
					if(!payModes.mycontains(data[i])){
						var option=document.createElement("option");
						$("#select1").append(option);
						option.value=data[i].id;  //每个option的位置
						option.text=data[i].payCode+":"+data[i].payName;//每个Option的值 
					}
				}
			}
		});
                    
               }
            }
        }
    });
}

web前端左右选择框移动，及查询

猜你喜欢