Bootstrap-select不适用于动态填充的选项 [英] Bootstrap-select not working with dynamically populated options
本文介绍了Bootstrap-select不适用于动态填充的选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
'use strict';
var PS = (function(){
var municipes = [{
"cod_prov": "01",
"cod_mun": "001",
"id": 0,
"name": "Alegría-Dulantzi"
}, {
"code": "47",
"name": "VALLADOLID"
}, {
"code": "48",
"name": "BIZKAIA"
}, {
"code": "49",
"name": "ZAMORA"
}, {
"code": "50",
"name": "ZARAGOZA"
}, {
"code": "51",
"name": "CEUTA"
}, {
"code": "52",
"name": "MELILLA"
}];
var provinceCssSelector = '.ps-prov';
var municipeCssSelector = '.ps-mun';
var provinceDefaultText = 'Provincia';
var municipeDefaultText = 'Municipio';
$().ready(function() {
// Set default text
$(provinceCssSelector).append($('<option>').text(provinceDefaultText).attr('value', -1));
$(municipeCssSelector).append($('<option>').text(municipeDefaultText).attr('value', -1));
// Populate province select
$.each(provinces, function(number, province) {
$(provinceCssSelector).append($('<option>').text(province.name).attr('value', province.code));
});
// When selected province changes, populate municipe select
$(provinceCssSelector).change(function() {
var selectedProvince = this.value;
$(municipeCssSelector).empty();
$(municipeCssSelector).append($('<option>').text(municipeDefaultText).attr('value', -1));
$.each(municipes, function(number, municipe) {
if (municipe.cod_prov == selectedProvince) {
$(municipeCssSelector).append($('<option>').text(municipe.name).attr('value', number.toString()));
}
});
});
$('.selectpicker').selectpicker('refresh');
});
}());
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<tr>
<td>Select where happenings occurred</td>
<td>
<select id="province" name="province" class="ps-prov selectpicker show-tick form-control" data-live-search="true" ></select>
</td>
</tr>
<tr>
<td>Select city</td>
<td>
<select id="city" name="city" class="ps-mun selectpicker show-tick form-control" data-live-search="true"></select>
</td>
</tr>
</table>
</form>
</div>
</html>
我正在尝试使用bootstrap-select来改善我的项目的样式，但是当动态构建选择的选项时，插件无法正常工作，并且我没有发现错误.我已包括此 answer所建议的$('.selectpicker').selectpicker('refresh'); ，但仍然无法实现我想要的. HTML如下，并且可以正常运行:
I am trying to use bootstrap-select to improve the style of one my projects but when the options of the select are built dynamically the plugin does not work and I do not find the error. I have included the $('.selectpicker').selectpicker('refresh'); as proposed by this answer but still I am not able to achieve what I want. The HTML is the following and works perfectly:
<tr>
<td>Select where happenings occurred</td>
<td>
<select id="province" name="province" class="ps-prov selectpicker show-tick form-control" data-live-search="true"></select>
</td>
</tr>
<tr>
<td>Select city</td>
<td>
<select id="city" name="city" class="ps-mun selectpicker show-tick form-control" data-live-search="true"></select>
</td>
</tr>
javascript以下列方式工作
The javascript works in the following way
var provinceCssSelector = '.ps-prov';
var municipeCssSelector = '.ps-mun';
var provinceDefaultText = 'Provincia';
var municipeDefaultText = 'Municipio';
$().ready(function() {
// Set default text
$(provinceCssSelector).append($('<option>').text(provinceDefaultText).attr('value', -1));
$(municipeCssSelector).append($('<option>').text(municipeDefaultText).attr('value', -1));
// Populate province select
$.each(provinces, function(number, province) {
$(provinceCssSelector).append($('<option>').text(province.name).attr('value', province.code));
});
// When selected province changes, populate municipe select
$(provinceCssSelector).change(function() {
var selectedProvince = this.value;
$(municipeCssSelector).empty();
$(municipeCssSelector).append($('<option>').text(municipeDefaultText).attr('value', -1));
$.each(municipes, function(number, municipe) {
if (municipe.cod_prov == selectedProvince) {
$(municipeCssSelector).append($('<option>').text(municipe.name).attr('value', number.toString()));
}
});
$('.selectpicker').selectpicker('refresh');
});
});
有人知道如何使组合选择生效吗?
Does anyone know how to make the combo select works?
推荐答案
此处的问题是，插件bootstrap-select正在创建一个新元素(div)，该元素具有原始元素(选择)中的每个类.
The problem here is that the plugin bootstrap-select is creating a new element (div) that has every class from your original element (select).
因此，当您的代码尝试使用css选择器将选择中的选项添加到选择中时，您将同时添加到原始元素(选择)和插件创建的元素(div)中，从而导致行为不稳定.
So when your code tries to append the options in the select using the css selector, you are both appending in the original element (select) and in the element that the plugin created (div), causing the erratic behavior.
您可以通过多种方法来防止此行为，例如，使用ID选择器.
You have many ways to prevent this behavior, one is to use the ID selector for example.
以下是一个可能的解决方案摘要:
Here's a snippet a possible solution:
var provinceCssSelector = '#province';
var municipeCssSelector = '#city';
var provinceDefaultText = 'Provincia';
var municipeDefaultText = 'Municipio';
var provinces = [{
name: '1',
code: 1
}, {
name: '2',
code: 2
}, {
name: '3',
code: 3
}];
var municipes = [{
name: '1-1',
cod_prov: 1
}, {
name: '1-2',
cod_prov: 1
}, {
name: '1-3',
cod_prov: 1
}, {
name: '2-1',
cod_prov: 2
}, {
name: '2-2',
cod_prov: 2
}, {
name: '2-3',
cod_prov: 2
}, {
name: '3-1',
cod_prov: 3
}, {
name: '3-2',
cod_prov: 3
}, {
name: '3-3',
cod_prov: 3
}];
$().ready(function() {
// Set default text
$(provinceCssSelector).append($('<option>').text(provinceDefaultText).attr('value', -1));
$(municipeCssSelector).append($('<option>').text(municipeDefaultText).attr('value', -1));
// Populate province select
$.each(provinces, function(number, province) {
$(provinceCssSelector).append($('<option>').text(province.name).attr('value', province.code));
});
// When selected province changes, populate municipe select
$(provinceCssSelector).change(function() {
var selectedProvince = this.value;
$(municipeCssSelector).empty();
$(municipeCssSelector).append($('<option>').text(municipeDefaultText).attr('value', -1));
$.each(municipes, function(number, municipe) {
if (municipe.cod_prov == selectedProvince) {
$(municipeCssSelector).append($('<option>').text(municipe.name).attr('value', number.toString()));
}
});
$(municipeCssSelector).selectpicker('refresh');
$(municipeCssSelector).selectpicker('render');
});
});
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="http://silviomoreto.github.io/bootstrap-select/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://silviomoreto.github.io/bootstrap-select/bootstrap-select.min.js"></script>
<table>
<tr>
<td>Select where happenings occurred</td>
<td>
<select id="province" name="province" class="ps-prov selectpicker show-tick form-control" data-live-search="true"></select>
</td>
</tr>
<tr>
<td>Select city</td>
<td>
<select id="city" name="city" class="ps-mun selectpicker show-tick form-control" data-live-search="true"></select>
</td>
</tr>
</table>
希望有帮助！
这篇关于Bootstrap-select不适用于动态填充的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
