选择的插件选项不会传递给克隆行 [英] Chosen plugin Options are not passed to Cloned row

查看：159 发布时间：2018/4/28 11:57:11 javascript jquery git clone jquery-chosen

本文介绍了选择的插件选项不会传递给克隆行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

设置
我使用Chosen插件（ http：// harvesthq.github.com/chosen/ ）
和使用relCopy脚本进行克隆

问题
I可以成功克隆行，但max_selected_options等选项不会传递给克隆的行。
请告知我做错了什么？

HTML代码

 < label>选择选项< / label> 
 < option value =>< / option> 
< optgroup label =NFC EAST> 
< option>达拉斯牛仔< / option> 
< option>纽约巨人< / option> 
< option> Philadelphia Eagles< / option> 
< option> Washington Redskins< / option> 
< / optgroup> 
< optgroup label =NFC NORTH> 
< option> Chicago Bears< / option> 
< option> Detroit Lions< / option> 
<选项>绿湾包装工< /选项> 
<选项>明尼苏达维京人< / option> 
< / optgroup> 
< / select> < a class =removehref =＃>移除< / a> 
 
< / div> 
< form id =formaction =/method =post> 
< div class =files>< / div> 
< / form> 
< p>< a href =＃class =copy-link>添加更多< / a> 
< / p> 
< p>< a href =＃class =form-submit-button>提交表单< / a> 
< / p>

  $（main）; 
 
 function main（）{
 
 var fieldNumber = 0; 
 var fieldNameAndID =Opt_; 
 var maxFieldsAllowed = 5; 
 
 addField（fieldNumber）; $（）。copy-link）。on（click，function（e）{
 e.preventDefault（）; 
 
 addField（fieldNumber ）; 
}）; （click，a，function（e）{
 e.preventDefault（）; 
 
 fieldNumber = fieldNumber  -  1; 
 
 $（this）
 .parent（）
 .slideUp（function（）{
 $（this）.remove（）; 
}）; 
}）; $（）。form-submit-button）。on （$（＃form）。serialize（））; 
}）; 
 
 
函数addField（index）{
 
 fieldNumber = index + 1; 
 
 if（fieldNumber> maxFieldsAllowed）{
 fieldNumber = fieldNumber  -  1; 
 alert（抱歉！无法添加超过+ maxFieldsAllowed +字段。）; 
返回false; 
} 
 
 var newFieldNameAndID = fieldNameAndID + fieldNumber; 
 
 var $ new = $（。more-files-template）
 .clone（true）
 .removeClass（more-files-template hidden）
 .addClass（another-field）; 
 
 if（fieldNumber == 1）{
 $ new.find（。remove）。remove（）; 
} 
 
 $（。files）。append（$ new）; 
 $ b $ new.find（select）
 .attr（{
 name：newFieldNameAndID，
 id：newFieldNameAndID 
}）
 .chosen（{
 max_selected_options：2 
}）
 .bind（selected：maxselected，function（）{
 alert（Maximum limit reached）; 
}）; 
} 
 
};

CSS

  .hidden {
 display：none; / *隐藏模板* / 
}

这不是完美的，但会让你在正确的方向：）

希望有所帮助。

Varinder

SETUP I'm using Chosen plugin (http://harvesthq.github.com/chosen/) and Cloning using relCopy script

PROBLEM I can clone rows successfully but options like "max_selected_options" are not passed to cloned rows. Please advise what am I doing wrong?

Fiddle file: http://jsfiddle.net/KjNb5/

HTML Code

<label>Select Options</label>
<select data-placeholder="You may select upto Two options" name="Opt_1" id="Opt_1" class="chosen-select" multiple tabindex="6" style="width: 280px; ">
<option value=""></option>
    <optgroup label="NFC EAST">
        <option>Dallas Cowboys</option>
        <option>New York Giants</option>
        <option>Philadelphia Eagles</option>
        <option>Washington Redskins</option>
    </optgroup>
    <optgroup label="NFC NORTH">
        <option>Chicago Bears</option>
        <option>Detroit Lions</option>
        <option>Green Bay Packers</option>
        <option>Minnesota Vikings</option>
    </optgroup>
</select>

<p><a href="#" class="copy" rel=".addMoreFiles">Add More</a></p>

JS Files

/**
 * jQuery-Plugin "relCopy"
 * 
 * @version: 1.1.0, 25.02.2010
 * 
 * @author: Andres Vidal
 *          code@andresvidal.com
 *          http://www.andresvidal.com
 *
 * Instructions: Call $(selector).relCopy(options) on an element with a jQuery type selector 
 * defined in the attribute "rel" tag. This defines the DOM element to copy.
 * @example: $('a.copy').relCopy({limit: 5}); // <a href="example.com" class="copy" rel=".phone">Copy Phone</a>
 *
 * @param: string   excludeSelector - A jQuery selector used to exclude an element and its children
 * @param: integer  limit - The number of allowed copies. Default: 0 is unlimited
 * @param: string   append - HTML to attach at the end of each copy. Default: remove link
 * @param: string   copyClass - A class to attach to each copy
 * @param: boolean  clearInputs - Option to clear each copies text input fields or textarea
 * 
 */

(function($) {

    $.fn.relCopy = function(options) {
        var settings = jQuery.extend({
            excludeSelector: ".exclude",
            emptySelector: ".empty",
            copyClass: "copy",
            append: '',
            clearInputs: true,
            limit: 0 // 0 = unlimited
        }, options);

        settings.limit = parseInt(settings.limit);

        // loop each element
        this.each(function() {

            // set click action
            $(this).click(function(){
                var rel = $(this).attr('rel'); // rel in jquery selector format             
                var counter = $(rel).length;

                // stop limit
                if (settings.limit != 0 && counter >= settings.limit){
                    return false;
                };

                var master = $(rel+":first");
                var parent = $(master).parent();                        
                var clone = $(master).clone(true).addClass(settings.copyClass+counter).append(settings.append);

                //Remove Elements with excludeSelector
                if (settings.excludeSelector){
                    $(clone).find(settings.excludeSelector).remove();
                };

                //Empty Elements with emptySelector
                if (settings.emptySelector){
                    $(clone).find(settings.emptySelector).empty();
                };                              

                // Increment Clone IDs
                if ( $(clone).attr('id') ){
                    var newid = $(clone).attr('id') + (counter +1);
                    $(clone).attr('id', newid);
                };

                // Increment Clone Children IDs
                $(clone).find('[id]').each(function(){
                    var newid = $(this).attr('id') + (counter +1);
                    $(this).attr('id', newid);
                });

                //Clear Inputs/Textarea
                if (settings.clearInputs){
                    $(clone).find(':input').each(function(){
                        var type = $(this).attr('type');
                        switch(type)
                        {
                            case "button":
                                break;
                            case "reset":
                                break;
                            case "submit":
                                break;
                            case "checkbox":
                                $(this).attr('checked', '');
                                break;
                            default:
                              $(this).val("");
                        }
                         if ($(this).hasClass('chosen-select')) {

                            $(this).next('.chosen-container').remove();

                            $(this).css({display: "inline-block"}).removeClass("chosen-done");
                            var that = $(this);

                            setTimeout(function(){ that.removeData('chosen').chosen();},0);                       

                        }

                    });                 
                };

                $(parent).find(rel+':last').after(clone);

                return false;

            }); // end click action

        }); //end each loop

        return this; // return to jQuery
    };

})(jQuery);


$(function(){
var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
$('a.copy').relCopy({append: removeLink});
});

$(document).ready(function(){
    $(".chosen-select-deselect").chosen({allow_single_deselect:true});
    $(".chosen-select").chosen({max_selected_options: 2});
    $(".chosen-select").bind("chosen:maxselected", function () { alert("Maximum limit reached"); });
    $(".chosen-select").trigger('chosen:activate'); 
    });

解决方案

I think events are not assigned to newly cloned elements, even though "true" attribute is specified in the clone method.

Anyway, heres a quick work-around to ensure events are always attached.

New Fiddle : http://jsfiddle.net/KjNb5/4/

Old Fiddle : http://jsfiddle.net/KjNb5/1/

HTML

<div class="more-files-template hidden">
    <label>Select Options</label>
    <select data-placeholder="You may select upto Two options" multiple tabindex="6" style="width: 280px; ">
        <option value=""></option>
        <optgroup label="NFC EAST">
            <option>Dallas Cowboys</option>
            <option>New York Giants</option>
            <option>Philadelphia Eagles</option>
            <option>Washington Redskins</option>
        </optgroup>
        <optgroup label="NFC NORTH">
            <option>Chicago Bears</option>
            <option>Detroit Lions</option>
            <option>Green Bay Packers</option>
            <option>Minnesota Vikings</option>
        </optgroup>
    </select> <a class="remove" href="#">remove</a>

</div>
<form id="form" action="/" method="post">
    <div class="files"></div>
</form>
<p><a href="#" class="copy-link">Add More</a>
</p>
<p><a href="#" class="form-submit-button">Submit form</a>
</p>

$( main );

function main() {

    var fieldNumber = 0;
    var fieldNameAndID = "Opt_";
    var maxFieldsAllowed = 5;

    addField(fieldNumber);

    $(".copy-link").on("click", function (e) {
        e.preventDefault();

        addField(fieldNumber);
    });

    $(".files").on("click", "a", function (e) {
        e.preventDefault();

        fieldNumber = fieldNumber - 1;

        $(this)
            .parent()
            .slideUp(function () {
            $(this).remove();
        });
    });

    $(".form-submit-button").on("click", function (e) {
        e.preventDefault();

        alert($("#form").serialize());
    });


    function addField(index) {

        fieldNumber = index + 1;

        if (fieldNumber > maxFieldsAllowed) {
            fieldNumber = fieldNumber - 1;
            alert("Sorry! cannot add more than " + maxFieldsAllowed + " fields.");
            return false;
        }

        var newFieldNameAndID = fieldNameAndID + fieldNumber;

        var $new = $(".more-files-template")
            .clone(true)
            .removeClass("more-files-template hidden")
            .addClass("another-field");

        if (fieldNumber == 1) {
            $new.find(".remove").remove();
        }

        $(".files").append($new);

        $new.find("select")
            .attr({
            name: newFieldNameAndID,
            id: newFieldNameAndID
        })
            .chosen({
            max_selected_options: 2
        })
            .bind("chosen:maxselected", function () {
            alert("Maximum limit reached");
        });
    }

};

CSS

.hidden {
    display:none; /* to hide template */
}

This isn't prefect but will put you in right direction :)

Hope that helps.

Varinder

这篇关于选择的插件选项不会传递给克隆行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

选择的插件选项不会传递给克隆行 [英] Chosen plugin Options are not passed to Cloned row

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

选择的插件选项不会传递给克隆行 [英] Chosen plugin Options are not passed to Cloned row

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭