引導動態輸入選擇 - 多個同一頁

Question

上我試圖用這個引導程序片段： 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; 
    } 
}); 

可正常工作完全，當僅使用一次在頁。但是當在同一頁面上使用它兩次時，它們會發生衝突並且無法正確工作。我試着把所有的id改爲idname2（最後用2），並且做了一個整個javascript的副本，並在最後以2替換所有的id名稱。雖然這可行，但它也是一種非常糟糕的實施方式。

你能幫我弄清楚我該如何實現它，這樣我可以在同一頁面上至少使用2次剪切？任何幫助將非常感激。

Answer 1

我知道這不是調整你提供的JavaScript，但這應該爲你提供一個更好的結構的基礎，你可以建立..這裏是使用Knockout v3和你提供的引導CSS和標記的基本建議示例。

小提琴這裏： http://jsfiddle.net/n6ngC/55/

修訂小提琴：http://jsfiddle.net/n6ngC/85

淘汰賽是輕量級的，可以從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());