bootstrap-select动态加载数据，PHP代码示例

HTML 部分 2个select

<p class="form-group">
<label class="col-lg-3 control-label">服务种类</label>
<p class="col-lg-3">
<select name="service_pub" id="service_type" class="selectpicker form-control " data-live-search="false">
<option value="0">请选择</option>
</select>
</p>
</p>

<p class="form-group">
<label class="col-lg-3 control-label">服务类别</label>
<p class="col-lg-3">
<select name="service_class" id="service_class" class="selectpicker form-control " >
<option value="0">请选择</option>
</select>
</p>
</p>

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) {
        
           $type.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());
            });
        },
    });
    }
});