Question

I have an application with nearly 70 items in a <select> that allow multiple selection.

I’m trying to replace its behavior by two lists, where the user can drag/drop between a source list to a target list. The initial select should reflect the moves.

I’m trying to make it generic because I have to reuse the behavior in several pages, sometimes several times in the same page.

What I have by now (I reduced the actual number of items for readability) :

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

This code is producing unexpected result :

The “target” list’s generated DOM looks like ok :

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

but the “source” list’s generated DOM is a mess (it contains the page DOM in each element)):

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

I can’t see what’s wrong. I’d appreciate someone points me the root of the issue.

Here is a jsfiddle that show the issue : http://jsfiddle.net/gsYHb/

[edit] If i reverse the order of creating the source and target elements, the problem occurs on the other list :

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

in this case, this is the target list that is messy.

Answer 1

As you will see in http://jsfiddle.net/stevebeauge/gsYHb/6/, I have been able to solve my issue.

It was due to the $(this + "option:not(:selected)") selector that was returning the whole page.

Replacing this code with $(this).children("option:not(:selected)") make the script works (+ some other minor fixes)