Fatal编程技术网
  • javascript/
  • Javascript 使用JQuery克隆“选择”-从下拉列表中选择一个选项没有任何作用

Javascript 使用JQuery克隆“选择”-从下拉列表中选择一个选项没有任何作用

javascript jquery html

Javascript 使用JQuery克隆“选择”-从下拉列表中选择一个选项没有任何作用,javascript,jquery,html,Javascript,Jquery,Html,下面是HTML/JQuery代码示例。 我想克隆一个select。 顺便说一句，select确实被克隆了两次，因为某些原因，这是另一个问题，但是当使用鼠标从选项列表中选择一个项目时，该项目不会被选中，也不会在UI中更新 <body> <div> <form action="" method="POST" id="id_of_form"> <div id="id_div_selection_options"&

下面是HTML/JQuery代码示例。 我想克隆一个select。 顺便说一句，select确实被克隆了两次，因为某些原因，这是另一个问题，但是当使用鼠标从选项列表中选择一个项目时，该项目不会被选中，也不会在UI中更新

<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 %}
如果能得到一些关于这方面的提示就太好了

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


<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 %}
德克萨斯州 Guy

您需要选择的name属性来发布值

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

 <select id="id_selection_options" name="someName[]">
                               //--^^^ here---
使用“名称中的数组”发布多个值似乎没有问题。consoleA JSFIDLE链接中的任何错误都会有帮助。您正在克隆一个div并更改其id，但没有更改克隆的select的id。@Arun p Johny:Console:单击按钮后没有消息。页面加载时有：资源被解释为图像，但使用MIME类型Image/x-png进行传输：@Teemu:使用元素视图更改id-相同的问题。我试过了，但问题还是一样：还有其他建议吗？ 
<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 %}