Javascript 引导动态输入选择-同一页面上有多个

我正在尝试使用以下引导片段：

我在同一页的两个不同的模态对话框中使用它

我按照他们在上述链接上的建议实施：

HTML:

挑选
选择一个
选择1
选择2
选择3
选择4

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

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

/*
文本字段
*/
$（函数（）{
$（文档）.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（“”+sInputGroupHtml+“”）；
});
$（文档）.on（'click'，'div.form-group-options.input group addon remove'，function（）{
$（this.parent（）.remove（）；
});
});
/* 
挑选
*/
$（函数（）{
var值=新数组（）；
$（文档）.on（'change'，'）。窗体组多次选择。输入组多次选择：最后一个子选择'，函数（）{
var-selectsLength=$（'.form-group-multiple-select.input-group-multiple-select'）。长度；
var optionsLength=（$（this）.find（'option'）.length）-1；
如果（选择长度<选项长度）{
var sInputGroupHtml=$（this.parent（）.html（）；
var sInputGroupClasses=$（this.parent（）.attr（'class'）；
$（this.parent（）.parent（）.append（“”+sInputGroupHtml+“”）；
}
updateValue（）；
});
$（文档）.on（'change'，'）。窗体组多次选择。输入组多次选择：not（：last child）select'，function（）{
updateValue（）；
});
$（文档）.on（'单击'，'）。输入组加载项删除'，函数（）{
$（this.parent（）.remove（）；
updateValue（）；
});
函数updateValues（）
{
值=新数组（）；
$（'.form group multiple selects.input group multiple selects'）。每个（函数（）{
var值=$（this.val（）；
如果（值！=0&&value！=“”）{
值。推送（值）；
}
});
$（'.form group multiple select.input group multiple select'）.find（'option'）.each（function（）{
var optionValue=$（this.val（）；
var selectValue=$（this.parent（）.val（）；
if（在数组中（optionValue，values）！=1&&selectValue！=optionValue）
{
$（this.attr（'disabled'，'disabled'）；
}
其他的
{
$（this.removeAttr（'disabled'）；
}
});
}
_数组中的函数（针、草垛）{
var=0；
对于（var i=0，length=haystack.length；i我知道这并不是在调整您提供的javascript，但这应该为您提供一个更好的结构基础。下面是使用Knockout v3和您提供的引导css和标记的基本建议示例

在这里拉小提琴：

更新的小提琴：

Knockout是轻量级的，可以从下载（如果您使用的是NuGet，那么可以从那里下载）

这需要更多的工作，因为由于下拉列表的更改，一个项目最初总是被添加。我建议使用一个按钮来代替新的选择，但这显然取决于需求

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

见下文：
HTML

这只是一个建议，但是，您考虑过使用KnockoutJS吗？&上面的一个解决方案是将一个parent wrapping dom元素传递给所有在代码中引用类的jquery选择器，但是如果您尝试KO，并且为每个选择列表提供一个带有可观察数组的viewmodel，可能会更干净 want@Pricey我不知道KnockoutJS，我会看一看。它也可以用于下拉菜单吗？-我喜欢上面的代码片段的原因是它是用bootstrap制作的，我不需要加载任何外部javascript库。你能解释一下我是如何开始包装dom元素的吗？我对javascript没有太多经验，但是我愿意尝试。我一直在使用引导和淘汰，我建议你尝试KO教程，如果你对javascript不是很有经验的话，那会更简单、更可靠。真的，非常感谢你的工作。我昨晚做了一些淘汰JS Tut，但在来到这里之前仍然觉得我还有一些路要走。我给了你对此投赞成票，但如果有人接受对原始问题的挑战，我将保留问题。我将尝试实现这一点，如果我知道如何“修复”你可以多次添加相同的项目，我将在这里发布我的修改/加载项。再次非常感谢！@Bolli如果你不想添加相同的项目mul然后举个例子，您可以将
availableMeals
更改为observableArray，然后使用计算出的observableArray代替新的下拉选择，该选择通过从可用内容中删除任何
self.fines
选择来过滤数组。请查看KO实用程序函数，尤其是
KO.utils.arrayFilter
knockmeout.net网站是一个出色的信息源，由在KO工作的人编写。@Bolli如果我有时间，我会考虑将小提琴示例更新为更“适合生产”的酷！我现在正在本地玩它-如果我弄明白了，会发布一些代码。@Bolli这里是一个例子“正在进行”更新它有一些需要修复的错误，并且更改时所选的选项尚未自动更新，但这是朝着正确方向迈出的一步
<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>

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