Question

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

一切正常......当我使用Jquery Chosen插件进行下拉时..它只适用于第一行..

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

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

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

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

我创建了样本组合克隆表单插件并选择了..

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

重要的部分是：

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

此外，尽管它也可以正常工作，但我认为您希望在克隆代码中使用newElem.insertAfter，而不是newElem.appendTo。我认为它更好地宣告了你的意图。

Jquery clone和Chosen在第一行之后初始化问题

1 个答案: