的选项

的选项

关注
发信
关注(28)粉丝(399)

jquery - 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是以下内容，并且可以完美运行:
<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');
  });
});

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

最佳答案

这里的问题是插件bootstrap-select正在创建一个新元素(div)，该元素具有原始元素(选择)中的每个类。

因此，当您的代码尝试使用css选择器将选择中的选项添加到选择中时，您将同时添加到原始元素(选择)和插件创建的元素(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>


希望能帮助到你!

关于jquery - Bootstrap-select不适用于动态填充的选项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32681437/

10-12 13:18
Powered by LMLPHP ©2024 的选项 0.043549