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("系统繁忙");
			}
		});
	});
});