Update: - My updated script is second and works fine (I found the solution myself), but I don't like the way it is written. Can any thing be changed to look better?
Below is the full code of what I wrote. he does it
- Based on the
filterDis selection filterDis it fills the sourceCars selection sourceCars - When the user double-clicks on
sourceCars , he moves the car to the targetCars selection targetCars - When a user double-clicks on
targetCars , he moves the car to the original cars and SORTS THE SOURCE
This does not seem like the perfect solution and has a couple of problems:
- Select GM from the
filterDis selection filterDis , double-click on any element and move it to the target. Select "ALL" from the filter, it removes everything from the target and fills every thing in the list of source cars. Is there a way to save target cars and display only other cars in the original list, even if I select "ALL"? This is also a problem if I first select “GM” and move something target, and also select some other type of car and select “GM” again, this removes the cars from the target ... - If I select “GM” and transfer to one car to select a target, select “Honda” and double-click on the GM car we have chosen. This adds the original Honda listing.
and I'm not sure if the sorting I do at the end of the source is the right solution.
any short cuts to implement this?
thanks for the help
Hi
Kiran
FULL CODE below
<!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 WILL RECEIVE AN ANSWER AND HERE THIS
<!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>
Bujji source share