<div class="form-group"> <label class="control-label col-xs-12 col-sm-2">发送者:</label> <div class="col-xs-12 col-sm-8"> {:build_select('row[sender]', $senders, null, ['class'=>'form-control selectpicker sender', 'data-rule'=>'required'])} </div> </div> <div class="form-group"> <label class="control-label col-xs-12 col-sm-2">{:__('External_userid')}:</label> <div class="col-xs-12 col-sm-8"> <select id="c-external_userid" class="form-control selectpicker" name="row[external_userid]"> <option value="0" id="external_userid">请选择</option> </select> </div> </div>
1.build_select是框架内置的函数,$senders为数据集
$('.sender').on('changed.bs.select', function() {//单击时方法 // console.log('agja'); var ids = $(this).val(); console.log($('.sender').selectpicker('val')); $.post('qywx.gmsglog/getFollowUser', { 'userid':ids }, function (data) { $('#c-external_userid').html(""); for(var i in data){ $('#c-external_userid').append('<option value="'+data[i]+'">'+data[i]+'</option>') } $('select').selectpicker('refresh'); } ); });
1.当第一个select点击选择时候,通过jq监听拿到数据,传送给后台接口
public function getFollowUser() { $userid = $this->request->post('userid'); $external_userids = Db::name('qywx_resident_follow_user')->field('external_userid')->where('userid', $userid)->select()->toArray(); $external_userids = array_column($external_userids, 'external_userid'); $external_userids = array_combine($external_userids, $external_userids); return json($external_userids); }
1.通过json返回数据
思考:
1.定义两个下拉选择框,通过事件进行关联,拿到第一个下拉框的id传送给后台,拿到数据
2.每次点击的时候需要清空之前的option
3.$('select').selectpicker('refresh');刷新一下select,重新加载append数据
4.select加multiple=""属性为多选