bootstrap-select 联动框 后台php模拟数据接受

bootstrap-select 动态加载数据 数据循环后要加 
select.selectpicker('refresh');

HTML 部分 2个select

<div class="form-group">

<label class="col-lg-3 control-label">服务种类</label>

<div class="col-lg-3">

<select name="service_pub" id="service_type" class="selectpicker form-control " data-live-search="false">

<option value="0">请选择</option>

</select>

</div>

</div>

<div class="form-group">

<label class="col-lg-3 control-label">服务类别</label>

<div class="col-lg-3">

<select name="service_class" id="service_class" class="selectpicker form-control " >

<option value="0">请选择</option>

</select>

</div>

</div>

js 部分  json数据var serClass=[

{name:'普通服务',value:'1'},

{name:'会员服务',value:'2'},

{name:'高级服务',value:'3'},

{name:'vip服务',value:'4'},

{name:'私人服务',value:'5'}

];

var serType=[

[

{name:'普通服务1',value:'1'},

{name:'普通服务2',value:'2'},

{name:'普通服务3',value:'3'},

{name:'普通服务4',value:'4'},

{name:'普通服务5',value:'5'},

{name:'普通服务6',value:'6'}

],

[

{name:'会员服务1',value:'1'},

{name:'会员服务2',value:'2'},

{name:'会员服务3',value:'3'},

{name:'会员服务4',value:'4'},

{name:'会员服务5',value:'5'},

{name:'会员服务6',value:'6'}

],

[

{name:'高级服务1',value:'1'},

{name:'高级服务2',value:'2'},

{name:'高级服务3',value:'3'},

{name:'高级服务4',value:'4'},

{name:'高级服务5',value:'5'},

{name:'高级服务6',value:'6'}

],

[

{name:'VIP服务1',value:'1'},

{name:'VIP服务2',value:'2'},

{name:'VIP服务3',value:'3'},

{name:'VIP服务4',value:'4'},

{name:'VIP服务5',value:'5'},

{name:'VIP服务6',value:'6'}

],

[

{name:'私人服务1',value:'1'},

{name:'私人服务2',value:'2'},

{name:'私人服务3',value:'3'},

{name:'私人服务4',value:'4'},

{name:'私人服务5',value:'5'},

{name:'私人服务6',value:'6'}

]

];

---联动部分 结合Bootstrap-select

var $type= $('#service_type');

var $service= $('#service_class');

$.each(serClass,function(i,item){

// console.log(item);

$type.append(`<option value=${item.value}>${item.name}</option>`);

});

// console.log($type.children());

$type.on('change',function(){

var i=$(this).find('option:selected').attr('value')-1;

if(i>=0){

// console.log( serType[i] );

$service.find('option:gt(0)').remove();

// $service.empty();

// $service.append(`<option value="0">请选择</option>`);

$.each(serType[i],function(j,item){

console.log(item);

$service.append(`<option value=${item.value}>${item.name}</option>`);

$service.selectpicker('refresh');

});

}

});

加载 后端数据 php

PHP  代码示例

<?php
/**
* Created by PhpStorm.
* User: biogle
* Date: 2017/10/18
* Time: 17:07
*/
@$index=$_REQUEST['service_class'];
//$index=1;
$customer=[
[
['name'=>'玉米客户1',
'value'=>'1'],
['name'=>'玉米客户2',
'value'=>'2'],
['name'=>'玉米客户3',
'value'=>'3'],
['name'=>'玉米客户4',
'value'=>'4'],
['name'=>'玉米客户5',
'value'=>'5']
],
[
['name'=>'小麦客户1',
'value'=>'1'],
['name'=>'小麦客户2',
'value'=>'2'],
['name'=>'小麦客户3',
'value'=>'3'],
['name'=>'小麦客户4',
'value'=>'4'],
['name'=>'小麦客户5',
'value'=>'5']
],
[
['name'=>'老鼠客户1',
'value'=>'1'],
['name'=>'老鼠客户2',
'value'=>'2'],
['name'=>'老鼠客户3',
'value'=>'3'],
['name'=>'老鼠客户4',
'value'=>'4'],
['name'=>'老鼠客户5',
'value'=>'5']
]
];
#echo $index;
echo json_encode($customer[$index]);

后端数据接受

$type.on('change',function(){
var index=$(this).find('option:selected').attr('value')-1;
if(index>=0){
$(this).attr('value',index);
$.ajax({
url: 'php/member.php',
type: 'GET',
dataType: 'json',
async:true,
data:{"customer_id":index},
error:
function(XMLHttpRequest, textStatus, errorThrown){
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
},
success: function(data) {

.find('option:gt(0)').remove();
$.each(data, function(i, item) {
// console.log(i);
// console.log(item);
$type.append(`<option value=${item.value}>${item.name}</option>`)
.selectpicker('refresh');
// console.log($type.children());
});
},
});
}
});