Bootstrap-select 不适用于动态填充的选项答案

【问题标题】：Bootstrap-select not working with dynamically populated optionsBootstrap-select 不适用于动态填充的选项
【发布时间】：2015-12-17 08:08:57
【问题描述】：

'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 如下，完美运行：

<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 的工作方式如下

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

有人知道如何使组合选择起作用吗？

【问题讨论】：

你能重现这个问题吗？
该插件无法正常工作可能是因为您需要使用 .on 函数，因为您在 jquery 中创建元素但该插件是从现有 DOM 实例化的

标签： jquery twitter-bootstrap

【解决方案1】：

这里的问题是插件 bootstrap-select 正在创建一个新元素 (div)，其中包含原始元素 (select) 中的每个类。

因此，当您的代码尝试使用 css 选择器在 select 中附加选项时，您同时在原始元素 (select) 和插件创建的元素 (div) 中附加，从而导致不稳定的行为。

你有很多方法可以防止这种行为，例如使用 ID 选择器。

这是一个可能的解决方案：

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>

希望对你有帮助！

【讨论】：

【解决方案2】：

我的项目中也遇到了同样的问题，但使用以下技巧解决了：

在我的Ajax successCallBack 中，我正在尝试根据dynamicId（我从服务器获得的值）操作一个ID 为reasonCode 的下拉列表，如下所示：

$('#reasonCode option[value='+dynamicId+']').prop('selected', true);

但不幸的是，直到我在此之后添加另一行如下：

$('#reasonCode').selectpicker('refresh');

【讨论】：

【解决方案3】：

 $('.selectpicker').selectpicker('refresh');

我已经尝试过了，它正在工作。

【讨论】：

【解决方案4】：

$('. your select tag class or # your select tag id').selectpicker('refresh');

我用它来动态添加和删除更多字段。

【讨论】：