Question

我有以下代码：

function moveAllItems(source, dest)
{
     $("#"+source+" option").appendTo("#"+dest);
}

我希望此代码将源列表中的前10个项目追加到目标列表，而不是一次附加所有这些项目。有没有办法做到这一点？

我在考虑做这样的事情：

function moveAllItems(source, dest)
{
     var x = 0;
     while(x < 10){
          $("#"+source".options[i]).appendTo("#"+dest);
          x++;
     }
}

但这显然不起作用。我脑子里有这个想法，但是用正确的语法来执行它

Answer 1

您可以尝试这样的事情：

function moveItems(n, source, dest) {
    for(var i = 0; i < n; i++) {
        $("#" + source + " option:eq(" + i + ")").appendTo("#" + dest);
    }
}

这只会移动该函数的第一个参数中指定的n个项目。

Answer 2

最简单的方法是通过CSS选择器，如下所示;

function moveAllItems(source, dest)
{
     $("#"+source+" option:nth-child(-n+10)").appendTo("#"+dest);
}

这将移动前10个项目。这是一个JSFiddle与它一起工作

您也可以使用:eq() CSS选择器并按照您的建议使用循环，如下所示;

function moveAllItems(source, dest)
{
     var x = 0;
     while(x < 10){
          $("#"+source+" option:eq("+x+")").appendTo("#"+dest);
          x++;
     }
}

:eq()选择器，选择第n个元素，因此在这种情况下您可以单独移动每个项目。这可能比它的价值更麻烦。

Answer 3

我会做类似下面的例子：

＆＃13;

function moveAllItems(source, dest) {
  var x = 0;
  var $src = $('#' + source);
  var $des = $('#' + dest);
  
  while (x < 10) {
    var $opt = $src.find('option').eq(x).clone();
    $des.append($opt);
    x++;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
   <option selected>One</option>
   <option>Two</option>
   <option>Three</option>
   <option>Four</option>
   <option>Five</option>
   <option>Six</option>
   <option>Seven</option>
   <option>Eight</option>
   <option>Nine</option>
   <option>Ten</option>
   <option>Eleven</option>
   <option>Twelve</option>
   <option>Thirteen</option>
   <option>Fourteen</option>
   <option>Fiftheen</option>
</select>
<select id="select2"></select><br />
<input type="button" value="Export" onclick="moveAllItems('select1', 'select2')" />

＆＃13;

JavaScript将前10个项目从一个选项列表移动到另一个选项列表

3 个答案: