jQuery选项appendTo select移动到下一个选项而不是选择一个

Question

http://jsfiddle.net/j3oh6s3a/

由于某些原因,向SELECT标记添加选项不会选择selected ='selected'属性选项,而是选择列表中的下一个选项.

请看上面的jfiddle.

<select id="category">
    <option value='1'>Categroy 1</option>
    <option value='2'>Categroy 2</option>
    <option value='3'>Categroy 3</option>
</select>
<select id="sub-category">
    <option value='1' data-parentid='1'>Car1</option>
    <option value='2' data-parentid='1'>Car2</option>
    <option selected='selected' value='3' data-parentid='1'>Car3</option>
    <option value='4' data-parentid='1'>Car4</option>
    <option value='5' data-parentid='1'>Car5</option>
    <option value='6' data-parentid='2'>Car6</option>
    <option value='7' data-parentid='2'>Car7</option>
    <option value='8' data-parentid='2'>Car8</option>
    <option value='9' data-parentid='3'>Car9</option>
    <option value='10' data-parentid='3'>Car10</option>
    <option value='11' data-parentid='3'>Car11</option>
    <option value='12' data-parentid='3'>Car12</option>
</select>

$(document).ready(function(){
    var allsuboptions = $('#sub-category option').remove();
    var selectedOptions = allsuboptions.filter(function () {
        return $(this).data('parentid').toString() === $('#category').val().toString();
    });
    selectedOptions.appendTo('#sub-category');
});

在上面的示例中,应选择Car3,但在将选项附加到选择后选择Car4.

Answer 1

这是一个棘手（而且有趣）的问题。

如果您在不同的浏览器上测试小提琴，您会看到所选值发生变化：Chrome (Car4)、IE (Car3)、Firefox (Car5)。所以我对你的小提琴做了一些小小的改变来“证明一个理论”。您可以在此链接上查看更改：http://jsfiddle.net/j3oh6s3a/1/。我只向过滤器循环添加了一条日志，以便我可以在每次迭代中看到所选元素：

if ($(this).is(":selected")) { console.log("Selected value = " + $(this).val()) };

现在发生的情况是这样的（或者至少是我的理论）：一旦从列表中删除所选元素，每个浏览器都会继续，但认为足以确定所选选项。在这种情况下，每个浏览器都会以不同的方式进行：

• 由于所选选项已被删除，Chrome将自动（默认）选择option列表中剩余选项中的第一个 (Car4)。当此选项发送到新列表时，它会被自动选择，因为它比先前选择的选项新。日志为：3、4。

• Internet Explorer不执行任何操作，而是按原样复制每个元素，而不关心它们是否被选择。原始选择的值将是最终选择的值（Car3）。日志是：3。

• Firefox将像 Chrome 一样进行操作，但每次从列表中删除所选元素时，都会选择剩余元素中的第一个选项。对数为：3、4、5、6、7、8、9、10、11、12；但由于列表中插入的最后一个选项是 5，因此它将被选中。

我稍后会检查是否可以找到任何信息来获取此信息，但必须是明天，因为这里有点晚了。