Question

我想使用http://harvesthq.github.com/chosen/女巫jquery克隆功能：

<script type="text/javascript">
    $(function(){
        var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
        $('a.add').relCopy({ append: removeLink});
    });
</script>
<form method="post" action="">
    <div id="cloner">
    <p class="clone">
        <script type="text/javascript">
            jQuery(document).ready(function(){
            jQuery(".chzn-select").data("placeholder","Search...").chosen();
        });
        </script>
        <select data-placeholder="Search..." name="actor_name[]" class="chzn-select" style="width:350px;" tabindex="2">
            <option value=""></option>
            <?php
                require_once '../engine/db.php';
                $rezultat_url = mysql_query("SELECT `id`, `actor_name` FROM `actors` ORDER BY `id` DESC");
                while($row=mysql_fetch_array($rezultat_url)){
                    $id = $row[id];
                    $aktor = $row[actor_name];
                    echo'<option value="'.$id.'">'.$actor.'</option>';
                }
            ?>
            </select>
        <input type="text" name="role_name[]" value="" />
        <input type="text" name="epi_count[]" value="" />
    </p>
    </div>
    <p><a href="#" class="add" rel=".clone">Add More</a></p>
    <script src="chosen.jquery.js" type="text/javascript"></script>
    <script src="prism.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="../administrator/js/reCopy.js"></script>
</form>

这是我的表格克隆＆＃39>：

/**
* 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("");
                    }
                });
            };

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

            }); // end click action

        }); //end each loop

        return this; // return to jQuery

    };
})(jQuery)

问题是，当我克隆Chosen插件表单时，只有第一个工作，所有克隆的工作显示从第一个下拉。

我在这里发现了类似的问题 - ＆gt; How to add Chosen Plugin to dynamically created / cloned CSS div?

但我不知道如何使它适合我的脚本。有人可以帮助我适应我的脚本，并可以告诉我应该在哪里复制它。

Answer 1

我会在清除输入区域添加一个条件，以检查.chz-select类的选择，并按照您链接的答案执行重新初始化：

<强>更新

由于您使用true参数进行克隆，因此需要在重新初始化之前从元素中删除数据，同时我发现所选插件在添加display:inline-block;后未获得元素的计算宽度时出现问题所以我不得不在重新初始化之前使用超时来引入最小延迟

//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('chzn-select')) {
            $(this).next('.chzn-container').remove();
            $(this).css({display: "inline-block"}).removeClass("chzn-done");
            var that = $(this);
            setTimeout(function () {
                that.removeData('chosen').chosen();
            }, 0);
        }
    });
};

我该如何克隆选择的插件

1 个答案: