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