我正在尝试使用这个 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 名称。虽然这可行,但它也像是一种非常糟糕的实现方式。
你能帮我弄清楚如何实现它,这样我就可以在同一页面上至少使用这个片段两次吗?任何帮助将不胜感激。
最佳答案
我知道这不会调整您提供的 javascript,但这应该为您提供一个基础,让您可以构建更好的结构。这里是使用 Knockout v3 和 Bootstrap css 以及您提供的标记的基本建议示例。
在这里 fiddle : http://jsfiddle.net/n6ngC/55/ 罢工>
更新 fiddle :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());
关于javascript - Bootstrap 动态输入选择 - 同一页面上的多个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24254049/