0

選択ドロップダウンをコピー/複製し、Choosen Jquery プラグインと multiselect プラグインを使用するボタンがあります。最初の要素は完璧ですが、ボタンをクリックして要素をコピーすると、選択リストから選択できません。そのため、フォーム フィールドの最初のインスタンスのみが機能し、その後に追加された他のインスタンスは機能しません。

異なる ID を持っていれば機能しますが、同じ ID を使用すると問題が発生します。これを回避する方法はありません。

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

html

<div class="form-group">
    <fieldset class="fieldset-language" data-count="1">
        <div class="fieldset-content">
            <div class="row">
                <div class="col-md-5">
                    <select data-placeholder="Choose" id="ny-matrett" tabindex="2" name="ing[]">
                        <option value="">Test<option>
                    </select>
                </div>
                <div class="col-md-5">
                    <div class="input-group">
                        <input name="gram[]" type="text" class="form-control"  placeholder="grams">
                        <div class="input-group-addon"></div>
                    </div>
                </div>
                <div class="col-md-2 lol"></div>
            </div>                                                  
            <br><br>
            <div class="clearfix"></div>
        </div>
        <button class="add_field_button btn btn-warning" data-fields="0" name="add">add</button>    
        <span style="float:right;">
            <button type="submit" name="submit" class="btn btn-success">Save</button>
        </span>
    </fieldset>     
</div>
4

2 に答える 2

0

あなたは私が推測するヒントを述べました。両方のオブジェクトの ID は同じです。新しいオブジェクト/選択の ID を変更してみてください。ID を削除してから、.uniqueId() を使用して新しい ID を作成できます。

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

于 2016-02-03T15:41:23.180 に答える