Jquery - 根据组合框选择将项目从一个列表移动到另一个列表 [英] Jquery - Moving Items from one list to another based on the combobox selection

查看：296 发布时间：2016/12/19 14:51:05 jquery list combobox

本文介绍了Jquery - 根据组合框选择将项目从一个列表移动到另一个列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

更新： - 我更新的脚本是第二个，它是完美的（我发现解决方案自己），但我不喜欢它的方式写。任何事情都可以改变看起来更好？

下面是我写的全部代码。它所做的是

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

根据 filterDis 选择框， code> sourceCars 选择框

当用户双击 sourceCars targetCars 选择框

当用户双击 targetCars ，它会将汽车移动到来源汽车和SORTS THE SOURCE

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:

从 filterDis 选择框中选择GM，双击任何项目移动到目标。从过滤器中选择全部，它从目标中删除所有东西，并填充源车列表中的每个东西。 有什么方法可以保存目标汽车，只显示源列表中的其他汽车，即使我选择了全部吗？这也是一个问题，如果我先选择GM目标并选择一些其他汽车类型，并再次选择GM，这将从目标移除汽车...

如果我选择GM并将一辆车移动到目标，，并双击我们选择的目标GM汽车..这增加了源本田列表..

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?

感谢您的帮助

回馈

Kiran

下面的全部代码

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

推荐答案

<!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 - 根据组合框选择将项目从一个列表移动到另一个列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

Jquery - 根据组合框选择将项目从一个列表移动到另一个列表 [英] Jquery - Moving Items from one list to another based on the combobox selection

问题描述

推荐答案

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

Jquery - 根据组合框选择将项目从一个列表移动到另一个列表 [英] Jquery - Moving Items from one list to another based on the combobox selection

问题描述

推荐答案

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭