2
更新： - 我更新的脚本是第二个，它工作完美（我自己找到了解决方案），但我不喜欢它写入的方式。任何事情都可以改变看起来更好？Jquery - 基于组合框选择将项目从一个列表移动到另一个列表
下面是我写的完整代码。它的作用是
- 基础上
filterDis选择框，它填充sourceCars选择框 - 当
sourceCars用户双击，它移动的车到targetCars选择框 - 当用户双击在
targetCars点击，它的汽车移动到源汽车和排序SOURCE
这看起来并不像一个理想的解决方案，有几个问题：
- 从
filterDis选择框中选择GM，双击任意项目并将其移至目标。从过滤器中选择“全部”，它将删除目标中的所有东西，并填充源车列表中的所有东西。 即使我选择“全部”，是否有任何方法可以保留目标汽车并仅显示源列表中的其他汽车？这也是一个问题，如果我先选择“GM”并移动某些东西到目标并选择其他车型并再次选择“GM”，这会从目标中移除汽车... - 如果我选择“GM”汽车的目标，并选择“本田”和我们选择的。这增加了源本田列表中的目标通用汽车双击..
，我不知道我在源端做的排序是正确的解决方案..
任何捷径来实现这个？
感谢您的帮助
问候
基兰
FULL下面的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style type="text/css">
body
{padding:0; margin:0; font-weight:normal;font-size:13px;}
div#townDiv {
width :100px;
}
select.car{
margin:30px;
width:220px;
}
</style>
<script language="javascript" type="text/javascript">
$(function() {
var sourceCars=$('#sourceCars option').clone();
$('#filterDis').change(function() {
var val = $(this).val();
$('#sourceCars').empty();
sourceCars.filter(function(idx, el) {
return val === 'ALL' || $(el).text().indexOf('[' + val + ']') >= 0;
}).appendTo('#sourceCars');
});
$('#sourceCars').dblclick(function() {
$('#sourceCars option:selected').appendTo('#targetCars');
});
$('#targetCars').dblclick(function() {
$('#targetCars option:selected').appendTo('#sourceCars');
var foption = $('#sourceCars option:first');
var soptions = $.makeArray($('#sourceCars option:not(:first)')).sort(function(a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
});
$('#sourceCars').html(soptions).prepend(foption);
foption.attr("selected", true).siblings("option").removeAttr("selected");
});
});
</script>
<link href="styles.css" type="text/css" rel="Stylesheet" />
<title></title>
</head>
<body>
<div id="townDiv">
<select id="filterDis" class="car">
<option selected="true" >ALL</option>
<option>GM</option>
<option>Honda</option>
<option>Ford</option>
</select>
<select id="sourceCars" class="car" size="20" >
<option>Chevy [GM]</option>
<option>Buick [GM]</option>
<option>Civic [Honda]</option>
<option>Accord [Honda]</option>
<option>Focus [Ford]</option>
</select>
<select id="targetCars" class="car" size="20" >
</select>
</div>
</body>
</html>
UPDATE得到了答案，就是这样
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style type="text/css">
body
{padding:0; margin:0; font-weight:normal;font-size:13px;}
div#townDiv {
width :100px;
}
select.car{
margin:30px;
width:220px;
}
</style>
<script language="javascript" type="text/javascript">
$(function() {
var sourceCars=$('#sourceCars option').clone();
$('#filterDis').change(function() {
var val = $(this).val();
$('#sourceCars').empty();
sourceCars.filter(function(idx, el) {
var found=false;
$('#targetCars option').each(function(){
if ($(this).val()===$(el).text())
found=true;
});
if(found)
return false;
return val === 'ALL' || $(el).text().indexOf('[' + val + ']') >= 0;
}).appendTo('#sourceCars');
});
$('#sourceCars').dblclick(function() {
$('#sourceCars option:selected').appendTo('#targetCars');
});
$('#targetCars').dblclick(function() {
var targetList=$('#targetCars option:selected');
var filterVal= $('#filterDis').val();
if(filterVal === 'ALL' || targetList.text().indexOf('[' + filterVal + ']') >= 0)
targetList.appendTo('#sourceCars');
else
targetList.remove();
var foption = $('#sourceCars option:first');
var soptions = $.makeArray($('#sourceCars option:not(:first)')).sort(function(a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
});
$('#sourceCars').html(soptions).prepend(foption);
foption.attr("selected", true).siblings("option").removeAttr("selected");
});
});
</script>
<link href="styles.css" type="text/css" rel="Stylesheet" />
<title></title>
</head>
<body>
<div id="townDiv">
<select id="filterDis" class="car">
<option selected="true" >ALL</option>
<option>GM</option>
<option>Honda</option>
<option>Ford</option>
</select>
<select id="sourceCars" class="car" size="20" >
<option>Chevy [GM]</option>
<option>Buick [GM]</option>
<option>Civic [Honda]</option>
<option>Accord [Honda]</option>
<option>Focus [Ford]</option>
</select>
<select id="targetCars" class="car" size="20" >
</select>
</div>
</body>
</html>
如果有人想看到这个动作，看看这个的jsfiddle：http://jsfiddle.net/m8sah0hr/ – 2014-09-16 05:18:18