Using JQuery to clone a "select" - selecting an option from the drop down does nothing

Question

Below is HTML/JQuery code sample. I would like to clone a "select". The "select" is indeed cloned (BTW, twice for some reason, which is another question) but when using the mouse to select an item from the list of options, the item is not selected and not updated in the UI.

Would be great to get some tips on this.

<body>
    <div>
        <form action="" method="POST" id="id_of_form">
            <div id="id_div_selection_options">
                <select id="id_selection_options">
                    <option value="a">a</option>
                    <option value="b">b</option>
                </select>
            </div>
        </form>
    </div>

    <p>
        <a id="add" href="#" data-role="button" data-icon="plus">Add another item</a>
    </p>
</body>


{% block extra-js %}
<script>
    $(document).ready(function() {

        function addEntry(btn) {
            var cloned = $('#id_div_selection_options').clone();
            cloned.attr('id', 'id_of_dup');
            cloned.appendTo($("#id_of_form"));
        }

        // Register the click event handlers
        $("#add").click(function() {
            return addEntry(this);
        });
    });
</script>
{% endblock extra-js %}

TX Guy

seems to be fine http://jsfiddle.net/arunpjohny/Q48LF/1/ any error in the console — Arun P Johny, Aug 30 '13 at 09:36
You're cloning a `div` and changing `id` of it, but not changing `id` of the cloned `select`. — Teemu, Aug 30 '13 at 09:38
@Arun P Johny: Console: no message after I click the button. On page load there is: Resource interpreted as Image but transferred with MIME type image/x-png: "http://127.0.0.1:8000/static/jquery.mobile-1.2.0/images/icons-18-white.png" — Guy, Aug 30 '13 at 10:27
Its a JQuery bug. Here is the solution: http://stackoverflow.com/questions/12950234/why-a-select-in-a-cloned-div-has-a-wrong-behavior-when-refreshed — Guy, Sep 03 '13 at 13:08

score 0 · Answer 1 · answered Aug 30 '13 at 09:37

0

you need name attribute of select to post the value..

 <select id="id_selection_options" name="someName[]">
                               //--^^^ here---

using array in name to post multiple values

answered Aug 30 '13 at 09:37

bipen

36,319
9
49
62

Thanks. I tried this but still the same problem: – Guy Aug 30 '13 at 10:17
Any other suggestions? – Guy Sep 02 '13 at 09:48

Using JQuery to clone a "select" - selecting an option from the drop down does nothing

1 Answers1