Question

使用jQuery Clone增加对象的当前GUID是否可行？

目前，当初始化选择器时，所有选择（包括隐藏的选择）都会被分配一个GUID。

克隆过程只是复制模板div。问题在于它还克隆了隐藏选择的GUID，这意味着任何动态添加的选择都会变得无法使用，因为多个选择共享相同的guid。

要在表单上实现所有选择，我使用以下代码：

$(document).ready(function () {
    $("select").selecter();
});

创建行的克隆的代码，包括select，如下所示：

$('.addButton').on('click', function () {
    var $template = $('#Template'),
        $clone = $template
            .clone(true, true)
            .removeClass('hide')
            .removeAttr('id')
            .attr('title', 'DynamicRow')
            .insertBefore($template);

    $("#Form").validate();

    $clone.find('[name="Type[]"]').rules("add", { required: true });     
});

我还包含了下面的HTML来演示克隆的内容：

<div class="fieldset">
    <div class="col-sm-1">
        <div>
            <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
        </div>
    </div>
    <div class="col-sm-11">
        <div class="field">
            @Html.LabelFor(model => model.Type)
            <select name="Type[]" id="Type[]">
                <option value="">Type</option>
                <option value="1">Other</option>
                <option value="2">Maintenance</option>
                <option value="3">Attendance</option>
            </select>
        </div>
    </div>
</div>
<div class="fieldset hide" id="Template">
    <div class="col-sm-1">
        <div>
            <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
        </div>
    </div>
    <div class="col-sm-11">
        <div class="field">
            @Html.LabelFor(model => model.Type)
            <select name="Type[]" id="Type[]">
                <option value="">Type</option>
                <option value="1">Other</option>
                <option value="2">Maintenance</option>
                <option value="3">Attendance</option>
            </select>
        </div>
    </div>
</div>

Formstone Classic Selecter库可在以下网址找到：

https://github.com/FormstoneClassic/Selecter/blob/master/jquery.fs.selecter.js

Answer 1

我能找到的唯一解决方法是单独初始化每个表单，因此无法使用$("select").selecter();，因为这会初始化所有选择，包括隐藏的选择。

HTML

<div class="fieldset" id="Types">
    <div class="col-sm-1">
        <div>
            <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
        </div>
    </div>
    <div class="col-sm-11">
        <div class="field">
            @Html.LabelFor(model => model.Type)
            <select name="Type[]" id="Type[]">
                <option value="">Type</option>
                <option value="1">Other</option>
                <option value="2">Maintenance</option>
                <option value="3">Attendance</option>
            </select>
        </div>
    </div>
</div>
<div class="fieldset hide" id="Template">
    <div class="col-sm-1">
        <div>
            <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
        </div>
    </div>
    <div class="col-sm-11">
        <div class="field">
            @Html.LabelFor(model => model.Type)
            <select name="Type[]" id="Type[]">
                <option value="">Type</option>
                <option value="1">Other</option>
                <option value="2">Maintenance</option>
                <option value="3">Attendance</option>
            </select>
        </div>
    </div>
</div>

初始化我使用$('#Types').find('[name="Type[]"]').selecter();的第一个选项并初始化隐藏的克隆选择我使用$clone.find('[name="Type[]"]').selecter();

我希望这对其他人有用。

Formstone Classic Selecter - jQuery克隆和修改GUID

1 个答案: