原生html和js实现联级查询（第一个选了才出现第二个的选项）

一、需求

        有一些内容需要实现联级查询的需求，比如选择了公司才出现公司对应的部门，或者选择了省份才出现省份对应的市区，这样的联级查询如何实现呢。

        PS：本实现方式用到了JQuery，主要用在元素获取和事件绑定上了。bootstrap主要用于样式设置，显得更好看一点，不用也没事，搜一搜js的获取dom节点的方法，还有js的事件绑定，那个addEventListener，一样的哈。

二、样式展示

三、实现

1、这里是用了那个php的activeform，其实就是设置了已给表单，然后表单里边有两个下拉列表，下拉列表里边绑定的数据是一个数组变量，从数据库里边查出来的。

<div class="row">
				
				<div class="col-xs-4 col-sm-4 col-md-4">
				<?= $form->field($select, 'problemSubsidiary',[
        'labelOptions' => ['style' => 'display:none;']
    ])->dropDownList(
						$problemSubsidiaryList,
						['id' => 'select2-company','style' => 'width:100%;','value' => null,'prompt' => '']
						
					); ?>
			</div>

			<div class="col-xs-4 col-sm-4 col-md-4">

				<?= $form->field($select, 'problemDepartment',[
        'labelOptions' => ['style' => 'display:none;']
    ])->dropDownList(
						$problemDepartmentList,
						['id' => 'select2-department','style' => 'width:100%;','value' => null,'prompt' => '']
					); ?>
			</div>
				<div class="col-xs-3 col-sm-3 col-md-3">
					<button type="submit" class="btn btn-primary" id="search"><span class="glyphicon glyphicon-search"></span> 查询</button>
				</div>
			</div>

不用管php代码，如果是用了一下样式依赖的话就简单了，如果没用样式依赖，就先看看怎样用两个数组渲染出两个下拉框吧。

2、为第一个下拉框绑定change事件

        change事件是下拉框选中的内容发生变化的时候触发的。也就是，在第一个下拉框选中的内容发生改变时，重新设置第二个下拉框使用的变量的值。

$.fn.getDepartment = function(company,department) {
	
		$.ajax({
			type:"POST",
			dataType:"json",
			data:{"company":company},
			url:"getdepartment",  
			success:function(data) {
                //此时返回的data就是所有的这个公司的部门名称
				var depList = data.obj;
				var options = "<option value=''>Select a department...</option>";
                $.each(depList, function(key, val) {
                    if(key == '$select2p'){
                        options += "<option value='" + key + "' selected>" + val + "</option>";
                    }
                    options += "<option value='" + key + "'>" + val + "</option>";
                });
                $('#select2-department').html(options);
                
                // 重新初始化 Select2 插件以支持模糊查询
                $('#select2-department').select2({
                    placeholder: '输入部门名称',
                    allowClear: true
                });
                
			}
		});
   };

 这里是使用ajax请求去后端获取的数据，把company作为参数传到了后端，根据后端的返回结果，将返回的结果处理一下以后，绑定到了第二个下拉框的html中，最后使用select2插件初始化是为了使下拉框具有模糊搜索功能。

我知道这篇讲的和粑粑一样，你们将就着看，因为是php代码，随意前后端混一块了可能不太好看，看不懂就再搜搜其他的