那些遇到过的问题

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

los*_*ver 5 jquery twitter-bootstrap 

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

}());
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

我正在尝试使用 bootstrap-select 来改进我的项目的风格，但是当动态构建选择的选项时，插件不起作用，我没有发现错误。我已经包括了$('.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>
Run Code Online (Sandbox Code Playgroud)

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');
  });
});
Run Code Online (Sandbox Code Playgroud)

有谁知道如何使组合选择有效？

Rom*_*ulo 5

这里的问题是插件 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');
  });
});
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

希望能帮助到你！

Raj*_*eep 5

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

在我的 中Ajax successCallBack，我试图操作一个下拉列表，其 idreasonCode基于dynamicId（我从服务器获得的值）如下：

$('#reasonCode option[value='+dynamicId+']').prop('selected', true);
Run Code Online (Sandbox Code Playgroud)

但不幸的是，这并没有奏效，直到我在这之后添加了另一行，如下所示：

$('#reasonCode').selectpicker('refresh');
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

18774 次

最近记录：

4 年，9 月 前
jquery bootstrap selectpicker基于先前列表选择的刷新列表 31
更多相关链接
相关归档
用户按下jQuery事件在文本框中输入？ 243
未捕获错误:SECURITY_ERR:DOM异常18当我尝试设置cookie时 120
jQuery中的addClass和removeClass - 不删除类 30
是否有可能使用Twitter Bootstrap呈现不确定的进度条？ 30
如何在单击数据关闭按钮时清除引导模式中的所有输入字段？ 28
jquery:Flash消息 18
jquery.history.js VS jquery-hashchange 18
如何在运行时更改引导程序(twitter)进度条的颜色 14
如何修剪Bootstrap下拉菜单以适应内容？ 6
将Bootstrap js插件添加到brunch-config.js以用作前端资产？ 5
难疑归档
如何在Java中调用另一个构造函数？ 2144
深度克隆对象 2135
我应该使用Vagrant还是Docker来创建一个孤立的环境？ 2049
以像素为单位获取屏幕尺寸 1798
如何一致地跨浏览器对齐复选框及其标签 1668
Python中的静态方法？ 1639
Android中的gravity和layout_gravity有什么区别？ 1286
在Node.js中读取环境变量 1240
在HTML中显示哪些字符可用于上/下三角(没有词干的箭头)？ 1212
.NET - 枚举的jSON序列化为字符串 1088