Jquery - Moving Items from one list to another based on the combobox selection

Question

Update :- My updated script is second one and which is working perfect ( I found the solution myself) , But I am not liking the way it is written . Any thing can be changed to look this better?

Below is the full code of what I have written . what it does is

Based on the filterDis select box, it populates the sourceCars select box
When the user double clicks on sourceCars , it moves the car to the targetCars select box
When the user double clicks on targetCars , it moves the car to source cars and SORTS THE SOURCE

This doesn't look like an ideal solution and has a couple of issues:

Select GM from the filterDis select box, double click on any item and move that to target. Select "ALL" from filter, it removes every thing from the target and populates every thing in the source cars list . Is there any way I can preserve the target cars and display only the other cars in the the source list even if I select "ALL"? This also a problem if I select "GM" first and move something to target and select some other car type and again select "GM" this removes the cars from target ...
If I select "GM" and move one car to target and select "Honda" and double click on the target GM car that we selected .. This adds to the source Honda list ..

and I am not sure the sorting I am doing at source end is the correct solution ..

any short cuts to implement this?

Thanks for your help

Regards

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 GOT THE ANSWER AND HERE IT IS

<!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>

Answer 1

<!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>

Jquery - Moving Items from one list to another based on the combobox selection

Question

1 answers

solution1
0 ACCPTED 2011-04-23 20:51:45

Jquery - Moving Items from one list to another based on the combobox selection

Question

1 answers

solution1 0 ACCPTED 2011-04-23 20:51:45

solution1
0 ACCPTED 2011-04-23 20:51:45