1. 云栖社区>
  2. PHP教程>
  3. 正文

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

作者:用户 来源:互联网 时间:2017-11-30 14:41:04

bootstrapphp联动select数据后台模拟接受

bootstrap-select 联动框  后台php模拟数据接受 - 摘要: 本文讲的是bootstrap-select 联动框 后台php模拟数据接受, bootstrap-select 动态加载数据 数据循环后要加 select.selectpicker('refresh'); HTML 部分 2个select <div class="form-group"> <

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());            });        },    });    }});







th7cn

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bootstrap , php , 联动 , select , 数据 , 后台 , 模拟 接受 ,以便于您获取更多的相关知识。