Jquery 第一行后克隆和选择初始化问题

Question

我想创建在表单中添加更多行..这样用户可以一次添加多个数据.. 要克隆行，请使用此插件

一切正常..当我使用Jquery下拉菜单的选择插件时..它只适用于第一行..

我想需要在创建每一行后初始化 selected.. 但我无法编辑 Clone-section-of-form-using-jQuery 文件来实现该结果..

我阅读了所有相关内容 post.. 那些大多数使用旧选择插件的.. 现在使用类似代码选择的日子显示在下面

 <select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
        <option value=""></option>
        <option value="United States">United States</option>
      </select>

        <script type="text/javascript">
          var config = {
                '.chosen-select'           : {},
                '.chosen-select-deselect'  : {allow_single_deselect:true},
                '.chosen-select-no-single' : {disable_search_threshold:10},
                '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
                '.chosen-select-width'     : {width:"95%"}
                }
            for (var selector in config) {
                $(selector).chosen(config[selector]);
            }
         </script>

所以我不知道如何将上面的代码应用到克隆表单插件:(

我创建了示例组合克隆表单插件和 Chosen..

Download Link

谁能帮帮我

谢谢

Answer 1

好的，我发现了你的问题。我已经这样更改了代码：我已经将初始化封装到一个函数中

function initSelects(baseSelector) {
    var config = {
        '.chosen-select' : {},
        '.chosen-select-deselect' : {
            allow_single_deselect : true
        },
        '.chosen-select-no-single' : {
            disable_search_threshold : 10
        },
        '.chosen-select-no-results' : {
            no_results_text : 'Oops, nothing found!'
        },
        '.chosen-select-width' : {
            width : "95%"
        }
    }
    for (var selector in config) {
        $(selector, baseSelector).chosen(config[selector]);
    }
}
initSelects('body');

然后我已经像这样更改了您的克隆代码：

    newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
    $('.chosen-container',newElem).remove();
    newElem.find("input:text").val("").end()
    newElem.find("input[type=date]").val("").end()
    newElem.appendTo('.clonedInput:last');
    $('select.chosen-select',newElem).show();
    initSelects(newElem);

重要的部分是：

从新元素中删除克隆的 Chosen
显示（取消隐藏）select
重新初始化 select

此外，虽然它也可以正常工作，但我认为您想在克隆代码中使用 newElem.insertAfter，而不是 newElem.appendTo。我认为它更能表达你的意图。

Jquery 第一行后克隆和选择初始化问题

Jquery clone and Chosen initialize issue after first row

jquery

clone

jquery-chosen