Question

我正在尝试使用此Bootstrap代码段： http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-new-field-on-focus-or-change

我在同一页面上的2个不同的模态对话框中使用它。

我按照他们在上面的链接上建议实现它：

HTML：

<div class="container">
    <h3>Selects</h3>
    <div class="row">
        <div class="form-group form-group-multiple-selects col-xs-11 col-sm-8 col-md-4">
            <div class="input-group input-group-multiple-select col-xs-12">
                <select class="form-control" name="values[]">
                    <option value="">Select one</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                </select>
                <span class="input-group-addon input-group-addon-remove">
                    <span class="glyphicon glyphicon-remove"></span>
                </span>
            </div>
        </div>
    </div>
</div>

使用Javascript：

/* 
    Text fields 
*/
$(function(){
    $(document).on('focus', 'div.form-group-options div.input-group-option:last-child input', function(){
        var sInputGroupHtml = $(this).parent().html();
        var sInputGroupClasses = $(this).parent().attr('class');
        $(this).parent().parent().append('<div class="'+sInputGroupClasses+'">'+sInputGroupHtml+'</div>');
    });

    $(document).on('click', 'div.form-group-options .input-group-addon-remove', function(){
        $(this).parent().remove();
    });
});

/* 
    Selects 
*/
$(function(){

    var values = new Array();

    $(document).on('change', '.form-group-multiple-selects .input-group-multiple-select:last-child select', function(){

        var selectsLength = $('.form-group-multiple-selects .input-group-multiple-select select').length;
        var optionsLength = ($(this).find('option').length)-1;

        if(selectsLength < optionsLength){
            var sInputGroupHtml = $(this).parent().html();
            var sInputGroupClasses = $(this).parent().attr('class');
            $(this).parent().parent().append('<div class="'+sInputGroupClasses+'">'+sInputGroupHtml+'</div>');  
        }

        updateValues();

    });

    $(document).on('change', '.form-group-multiple-selects .input-group-multiple-select:not(:last-child) select', function(){

        updateValues();

    });

    $(document).on('click', '.input-group-addon-remove', function(){
        $(this).parent().remove();
        updateValues();
    });

    function updateValues()
    {
        values = new Array();
        $('.form-group-multiple-selects .input-group-multiple-select select').each(function(){
            var value = $(this).val();
            if(value != 0 && value != ""){
                values.push(value);
            }
        });

        $('.form-group-multiple-selects .input-group-multiple-select select').find('option').each(function(){
            var optionValue = $(this).val();
            var selectValue = $(this).parent().val();
            if(in_array(optionValue,values)!= -1 && selectValue != optionValue)
            {
                $(this).attr('disabled', 'disabled');
            }
            else
            {
                $(this).removeAttr('disabled');
            }
        });
    }

    function in_array(needle, haystack){
        var found = 0;
        for (var i=0, length=haystack.length;i<length;i++) {
            if (haystack[i] == needle) return i;
            found++;
        }
        return -1;
    }
});

当在页面上仅使用一次时，这完全按预期工作。但是当在同一页面上使用它2次时，它们会发生冲突并且无法正常工作。我尝试将所有id更改为idname2（最后使用2），然后将整个javascript的副本替换为最后用2替换所有id名称。虽然这种方法有效，但它也是一种非常糟糕的实现方式。

你能帮我弄清楚我是如何实现它的，所以我可以在同一页面上使用这个剪辑至少两次吗？任何帮助将非常感激。

Answer 1

我知道这不是调整你提供的javascript，但是这应该为你提供一个更好的结构基础。这里是使用Knockout v3和你提供的bootstrap css和标记的基本建议示例。

在这里小提琴： ~~http://jsfiddle.net/n6ngC/55/~~

更新小提琴：http://jsfiddle.net/n6ngC/85

Knockout很轻量级，可以从http://knockoutjs.com/downloads/index.html下载（如果您使用的是NuGet，那么请从那里获取）

这需要更多的工作，因为最初总是会因为下拉列表的更改而添加项目。我建议使用按钮进行新选择，但显然这取决于要求。

目前这不会跟踪您在制作之后所做选择的更改，但更改可观察数组以包含可观察项目将会解决此问题。

见下文： HTML

<div class="container">
    <h3>Meals</h3>
    <div class="row" data-bind="foreach: meals">
        <div class="form-group form-group-multiple-selects col-xs-11 col-sm-8 col-md-4">
            <div class="input-group input-group-multiple-select col-xs-12">
                <select class="form-control" data-bind="options: $root.availableMeals, value: $data, optionsValue: 'id', optionsText: 'text'">
                </select>
                <span class="input-group-addon input-group-addon-remove" data-bind="click: $root.removeMealOption">
                    <span class="glyphicon glyphicon-remove"></span>
                </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group form-group-multiple-selects col-xs-11 col-sm-8 col-md-4">
            <div class="input-group input-group-multiple-select col-xs-12">
                <select class="form-control" data-bind="options: availableMeals, value: newMeal, optionsValue: 'id', optionsText: 'text'">
                </select>
            </div>
        </div>
    </div>    
</div>

<div class="container">
    <h3>People</h3>
    <div class="row" data-bind="foreach: people">
        <div class="form-group form-group-multiple-selects col-xs-11 col-sm-8 col-md-4">
            <div class="input-group input-group-multiple-select col-xs-12">
                <select class="form-control" data-bind="options: $root.availablePeople, value: $data, optionsValue: 'id', optionsText: 'text'">
                </select>
                <span class="input-group-addon input-group-addon-remove" data-bind="click: $root.removePersonOption">
                    <span class="glyphicon glyphicon-remove"></span>
                </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group form-group-multiple-selects col-xs-11 col-sm-8 col-md-4">
            <div class="input-group input-group-multiple-select col-xs-12">
                <select class="form-control" data-bind="options: availablePeople, value: newPerson, optionsValue: 'id', optionsText: 'text'">
                </select>
            </div>
        </div>
    </div>    
</div>

使用Javascript：

function MyViewModel() {
    var self = this;

    self.newMeal = ko.observable();
    self.newPerson = ko.observable();

    // the available list of options for each dropdown    
    self.availableMeals = [
        { id:"ST", text: "Standard (sandwich)" },
        { id: "PR", text: "Premium (lobster)" },
        { id: "UL", text: "Ultimate (whole zebra)" }
    ];

    self.availablePeople = [
        { id:"ST", text: "Steve" },
        { id: "BT", text: "Bert" },
        { id: "ER", text: "Ernie" }
    ];   

    // the selected values
    // this will be a list of objects that have their own observable properties
    self.meals = ko.observableArray([]); 
    self.people = ko.observableArray([]);

    // separate add and remove options
    self.addMealOption = function(meal) { self.meals.push(meal); }
    self.removeMealOption = function(meal) { self.meals.remove(meal); }

    self.addPersonOption = function(person) { self.people.push(person); }
    self.removePersonOption = function(person) { self.people.remove(person); } 

    self.newMeal.subscribe(function(value) {
        self.addMealOption(value);
    });

    self.newPerson.subscribe(function(value) {
        self.addPersonOption(value);
    }); 
}

// Activates knockout.js
ko.applyBindings(new MyViewModel());

Bootstrap动态输入选择 - 在同一页面上多个

1 个答案: