核心提示：web前端左右选择框移动，及查询当输入框输入信息进行查询时，若选择框中有则置顶且变亮，具体代码如下：!DOCTYPE htmlhtmlhead!-- 选择框移动js --script //选中添加到右...
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>
<p >
<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>
</p>
<p >
<p style="text-align: center">
<p 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>
</p>
<p 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();"/>
</p>
<p id="s2" style="float: left;">
<select id="select2" multiple="multiple" style="width: 130px;height: 100px;overflow-y:auto;">
</select>
</p>
</p>
</p>
</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) {
<span style="white-space:pre"> </span>var i = this.length;
<span style="white-space:pre"> </span>while (i--) {
if (this[i].id == obj.id) {
return true;
}
<span style="white-space:pre"> </span>}
return false;
span style="white-space:pre"> </span>}
//渲染左边支付方式
$.ajax({
type: 'POST',
url: '/payAssembly/getAllModes',
contentType: 'application/json',
success: function (data) {//得到左边的option数据，应先去除右边有的
<span style="white-space:pre"> </span>var length = data.length;
<span style="white-space:pre"> </span>for(var i=0;i<length;i++){
<span style="white-space:pre"> </span>if(!payModes.mycontains(data[i])){
<span style="white-space:pre"> </span>var option=document.createElement("option");
<span style="white-space:pre"> </span>$("#select1").append(option);
<span style="white-space:pre"> </span>option.value=data[i].id; //每个option的位置
<span style="white-space:pre"> </span>option.text=data[i].payCode+":"+data[i].payName;//每个Option的值
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
}
});
}
}
}
});
