Question

我的应用程序包含<select>中的近70个项目，允许多项选择。

我正在尝试用两个列表替换它的行为，用户可以在源列表和目标列表之间拖放。初始选择应反映移动。

我正在努力使其成为通用的，因为我必须在多个页面中重复使用该行为，有时在同一页面中重复几次。

我现在所拥有的（为了便于阅读，我减少了实际的项目数量）：

<div style="border: solid 1px red; overflow:auto">
    <select name="lst1" multiple="multiple" id="lst1" class="go">
        <option value="1">Element N°1</option>
        <option value="2">Element N°2</option>
        <option selected="selected" value="3">Element N°3</option>
        <option value="4">Element N°4</option>
        <option value="5">Element N°5</option>
    </select>
</div>

<script type="text/javascript">
    $(function () {
        $(".go").each(function (index, el) {
            var source = document.createElement("ul");
            var target = document.createElement("ul");
            $(el).after(source);
            $(el).after(target);
            $(source).addClass("sourceItems");
            $(target).addClass("targetItems");
            $(el + "option:selected").each(function (index2, sub) {
                var item = document.createElement("li");
                item.textContent = $(sub).text();
                $(target).append(item);
            });
            $(el + "option:not(:selected)").each(function (index2, sub) {
                var item = document.createElement("li");
                item.textContent = $(sub).text();
                $(source).append(item);
            });

            $(source).sortable({ connectWith : target});
            $(target).sortable({ connectWith : source });
        });
    });

</script>

<style type="text/css">    
.sourceItems, .targetItems { list-style-type: none; float:left; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 200px; border: solid 1px black; } 
.sourceItems li, .targetItems li { margin: 5px; padding: 5px; width: 180px; height: 12px; cursor: move; }
</style>

此代码产生意外结果：

enter image description here

“目标”列表生成的DOM看起来很好：

<ul class="targetItems ui-sortable">
<li>Element N°3</li>
<li>Element N°7</li>
<li>Element N°8</li>
<li>Element N°14</li>
<li>Element N°20</li>
<li>Element N°15</li>
<li>Element N°21</li>
</ul>

但是“源”列表生成的DOM是一团糟（它包含每个元素中的页面DOM））：

<li>
    .sourceItems, .targetItems { list-style-type: none; float:left; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 200px; border: solid 1px black; } 
    .sourceItems li, .targetItems li { margin: 5px; padding: 5px; width: 180px; height: 12px; cursor: move; }
</li><li>

</li><li></li><li>
    .sourceItems, .targetItems { list-style-type: none; float:left; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 200px; border: solid 1px black; } 
    .sourceItems li, .targetItems li { margin: 5px; padding: 5px; width: 180px; height: 12px; cursor: move; }

    Element N°1
    Element N°2
    Element N°3
    Element N°4
    Element N°5
    Element N°6
    Element N°7
    Element N°8
    Element N°9

...

Element N°3Element N°7Element N°8Element N°14Element N°15Element N°20Element N°21Element N°23Element N°27Element N°29Element.

我看不出有什么问题。我很感激有人指出了问题的根源。

这是一个显示问题的jsfiddle：http://jsfiddle.net/gsYHb/

[edit] 如果我颠倒了创建源元素和目标元素的顺序，则问题出现在另一个列表中：

        var source = document.createElement("ul");
        var target = document.createElement("ul");
        $(el).after(target);
        $(el).after(source);

在这种情况下，这是一个混乱的目标列表。

Answer 1

正如您将在http://jsfiddle.net/stevebeauge/gsYHb/6/中看到的，我已经能够解决我的问题。

这是由于$(this + "option:not(:selected)")选择器返回整个页面。

用$(this).children("option:not(:selected)")替换此代码使脚本有效（+其他一些小修补程序）

jQuery.after出乎意料的结果

1 个答案: