Laravel应用简单好用的多级联动插件cxSelect_cxselect data-th-url-优快云博客

本文链接：https://blog.youkuaiyun.com/amazingdyd/article/details/51319846

本文介绍了在Laravel应用中采用cxSelect插件实现多级联动的步骤。首先从官网下载cxSelect，然后在HTML代码中设置select元素，通过class指定选择的select，并利用data-url指定获取数据的接口，data-json定义返回数据的名称。默认情况下，插件会将上一select的name作为参数传递给data-url。更多详细用法可参考cxSelect的官方文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先去官网下载一个cxselect

select的写法是关键，这里的class是要被选择的select，这里的data-url是他这里要获取数据的地方，data-json是传回来的数据叫什么，默认往data-url里面传值的参数是上一个select的name，具体用法官网很详细

                              <label for="type">选择获奖学生</label>
                                <br>
                                <select name="studentnum" id="" class='studentnum' data-url="{{URL('getmedalstujson')}}" data-json-space="data">
                                    <option value="a">请选择</option>
                                </select>

引用JS

<script src="{{asset('lib/js/jquery-2.0.3.min.js')}}"></script>

<script src="{{asset('lib/js/jquery.cxselect.js')}}"></script>

然后设置

        $(function () {
            $('#studentsel').cxSelect({ //要做联动的DIV，这个必须设置！
                
                selects: ['college_id', 'act_id','studentnum'], //要做联动的select的class
                jsonName: 'name', //传回JSON时要应用的option名字
                jsonValue: 'value', //传回JSON时要应用的option值
                jsonSpace: 'data',//传回JSON时要应用的命名空间，例如传回来"data":['value':0,'name':1]
                required:'true', //是否为必选

            });

            
        })

getmedalstujson

public function getMedalStuJson(){
		$act_id = $_GET['act_id'];
		$data = array();
		$apply = Apply::where('act_id',$act_id)->get();

		foreach($apply as $a){
			$a->student = Student::where('studentnum',$a->studentnum)->first();
			
		}
		

		foreach($apply as $key=>$a){

			$data[$key]['value'] = $a->studentnum;  //必须要这种格式模板才能接受，这个是option里的值
			$data[$key]['name'] = $a->student->name;  //必须要这种格式模板才能接受，这个是option显示的名字
		}

		return response()->json(['status'=>1,'data'=>$data]);


	}