Обновление: - Мой обновленный скрипт является вторым и работает отлично (я сам нашел решение), но мне не нравится, как он написан.Любая вещь может быть изменена, чтобы выглядеть лучше?
Ниже приведен полный код того, что я написал.
- На основании поля выбора
filterDis заполняется поле выбора sourceCars - Когда пользователь дважды щелкает по
sourceCars, он перемещает автомобильв targetCars поле выбора - Когда пользователь дважды щелкает по
targetCars, он перемещает автомобиль в исходный автомобиль и сортирует ИСТОЧНИК
Это не похоже наидеальное решение и имеет несколько проблем:
- Выберите GM из поля выбора
filterDis, дважды щелкните любой элемент и переместите его к цели.Выберите «ВСЕ» из фильтра, он удаляет все из цели и заполняет все в списке автомобилей-источников. Можно ли каким-либо образом сохранить целевые автомобили и отобразить только другие автомобили в списке источников, даже если я выберу «ВСЕ»? Это также проблема, если я сначала выберу «GM» и переместлю что-то вцель и выберите другой тип автомобиля и снова выберите «GM», это удалит автомобили из цели ... - Если я выберу «GM» и переместу одну машину к цели, выберите «Honda» и дважды щелкните нацелевой GM автомобиль, который мы выбрали .. Это добавляет к списку Honda источник ..
, и я не уверен, что сортировка, которую я делаю в конце источника, является правильным решением.
Есть ли какие-нибудь короткие способы реализации этого?
Спасибо за вашу помощь
С уважением
Киран
ПОЛНЫЙ КОД НИЖЕ
<!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>
ОБНОВЛЕНИЕ ПОЛУЧИЛ ОТВЕТ И ЗДЕСЬ ЕГО
<!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>