bootstrap-select下拉列表實現(bootstrap4 bootrap-select 1.13 +)

準備工作

<!-- css -->
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-select/1.13.5/css/bootstrap-select.min.css" rel="stylesheet">

<!-- js -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-select/1.13.5/js/bootstrap-select.min.js"></script>

html

<div class="row">
   <div class="col">
     <label><h6>原渠道:</h6></label>
     <select class="selectpicker" id="channelSelector" data-live-search="true" title="請選擇"></select>
     <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
     <label><h6>轉單渠道:</h6></label>
     <select class="selectpicker" id="channelChangeSelector" data-live-search="true" title="請選擇"></select>
   </div>
</div>

js

$(function() {
	/** 原渠道加載 */
	$.ajax({
		type:"get",
		url:"/pack/channelCount",
		dataType:"json",
		success:function(data) {
			if(data) {
				$.each(data, function(i, o){
					$('#channelSelector').append("<option value='" + o.channelEn + "'>" + o.channelZh + "</option>");
				});
				$('#channelSelector').selectpicker("refresh");
			} else {
				layer.msg('沒有渠道信息');
			}
		},
		error:function() {
			layer.alert("系統繁忙");
		}
	});
	
	/** 轉渠道加載 */
	$('#channelSelector').change(function() {
		var channelSelected = $('#channelSelector').val();/*獲取第一個選擇框的選中值*/
		console.log(channelSelected);
		$('#channelChangeSelector').val('');/*當第一個選擇框改變時，重置第二個選擇框的選中值*/
		$.ajax({
			type:"get",
			url:"/pack/channelCount",
			dataType:"json",
			success:function(data) {
				if(data) {
					$('#channelChangeSelector').empty();
					$.each(data, function(i, o) {
						if(o.channelEn == channelSelected) {
							/*$.each方法中跳出循環不能用break或continue，continue採用return true實現該功能，break採用return false實現該功能 */
							return true;
						}
						$('#channelChangeSelector').append("<option value='" + o.channelEn + "'>" + o.channelZh + "</option>");
					});
					$('#channelChangeSelector').selectpicker("refresh");/*重新加載*/
				} else {
					layer.msg('沒有渠道信息');
				}
			},
			error:function() {
				layer.alert("系統繁忙");
			}
		});
	});
});