Question

我有一个复制/克隆选择下拉列表并使用Choosen Jquery插件和多选插件的按钮。第一个元素显示完美，但是当我单击按钮并复制我无法从选择列表中选择的元素时。所以只有表单字段的第一个实例才有效，而不是之后添加的其他实例。

如果我有不同的ID，它将起作用，但同样的ID会发生。任何帮助如何解决这个问题都是适当的。

cmake_minimum_required(VERSION 3.3)
project(TB2)

set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++11 ")

set(CMAKE_C_FLAGS "-std=c99 -static-libgcc -w -lpthread -lws2_32 -fopenmp -lwsock32")

set(SOURCE_FILES main.c r2nat_to_local.h mongoose.c mongoose.h sqlite3.c sqlite3.h TUtility.c TUtility.h cJSON.c cJSON.h url_parser.c url_parser.h)

add_executable(TB2 ${SOURCE_FILES})

target_link_libraries(TB2 sqlite3)

add_definitions(-DUNICODE -D_UNICODE -DMG_ENABLE_THREADS -DDEBUG -DDEBUG -DHAVE_MD5 -DRA100)

html

<script>                        
     $(document).ready(function(){
         $("#example").multiselect();
     });

    $(document).ready(function() {

        var max_fields = 20; //maximum input boxes allowed

        $(".add_field_button").click(function(e){ //on add input button click
            e.preventDefault();

            var add_button = $(this);
            var fieldset   = add_button.closest('fieldset');
            var wrapper    = add_button.closest('.sf-viewport');
            var form       = add_button.closest('form');
            var x          = parseInt(fieldset.attr('data-count'));
            //var cur_height = 0;
            var fieldset_clone;
            var fieldset_content;

            var viewport_height = 0;
            var fieldset_cont   = add_button.closest('.sf-step');


            if(x < max_fields){ //max input box allowed

                //text box increment
                fieldset.attr('data-count',x+1);

                console.log($(this).siblings().length);

                var cur_height = (fieldset_cont.height() * 1 - 99) / ($(this).siblings().length-1);

                viewport_height = wrapper.height()*1 + cur_height;
                fieldset_cont.height( fieldset_cont.height()*1 +  cur_height );
                wrapper.height(viewport_height);


                fieldset_clone = add_button
                                .closest('fieldset')
                                .find('.fieldset-content')
                                .eq(0)
                                .clone();

                fieldset_clone
                    .find('[name]')
                    .each(function(){
                        $(this).val($(this).prop('defaultValue'));
                    });


                fieldset_content = $('<div>')
                    .addClass('lol')
                    .append(fieldset_clone.children());


                add_button.before(fieldset_content);

                // add remove button
                add_remove_btn(fieldset_content);

            }
        });


        function add_remove_btn(item){
            item.prepend(
                '<a class="btn pull-right om-remove btn-danger" href="#">'+
                '  <div class="small" style="position:relative; z-index:999;">Slett tidsforbruk</div>'+
                '</a>'
            );
        }


        //user click on remove text
        $(document).on("click",".om-remove", function(e){

            e.preventDefault();

            var x = parseInt($(this)
                .closest('lol')
                .attr('data-count')
            );

            $(this)
                .closest('lol')
                .attr('data-count',x-1);

            $(this)
                .closest('.lol')            
                .slideUp(function(){
                    $(this).remove()
            })

            var height = $(this).closest('lol').height();
            var add_button = $(this);
            var viewport_height = 0;
            var fieldset_cont   = add_button.closest('.sf-step');
            var wrapper    = add_button.closest('.sf-viewport');
            var cur_height = (fieldset_cont.height() * 1 - 99) / ($(this).parent().siblings().length-1);

            viewport_height = wrapper.height()*1 - cur_height;
            fieldset_cont.height( fieldset_cont.height()*1 -  cur_height );
            wrapper.height(viewport_height);

        });
    });

</script>

Answer 1

你说明了我的暗示。两个对象具有相同的ID。尝试更改新对象/选择的ID。您可以删除其ID，然后使用.uniqueId（）

创建一个新ID

https://api.jqueryui.com/uniqueId/

Answer 2

您好我做了一个简单的演示，看起来像您的要求让我知道吗？ Here is my Fiddle 如果对于不同的id，你的多选择正在工作，那么你可以这样做，首先克隆你的多选，然后改变那个id属性，并基于新的id调用multiselect（）方法。

我这样做了：

＆＃13;

$(document).ready(function () {
                $('#example-getting-started').multiselect();
            });
            $('.copymultiselect').on("click",function(){
                var t=new Date().getTime();
                var copied=$('.common:first').clone();
                var abc=copied.attr('id','x_'+t);
                $('.multiselect_list').append(abc);
                $('#x_'+t).multiselect();
            });

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="multiselect_list">
        <select id="example-getting-started" multiple="multiple" class="common">
            <option value="cheese">Cheese</option>
            <option value="tomatoes">Tomatoes</option>
            <option value="mozarella">Mozzarella</option>
            <option value="mushrooms">Mushrooms</option>
            <option value="pepperoni">Pepperoni</option>
            <option value="onions">Onions</option>
        </select>
        <button class="copymultiselect">copy</button>
    </div>

＆＃13;

请问是对的吗？

如何在按钮单击时复制多个jquery-multiselect元素？

2 个答案: