jQuery二级联动动态列表

最新推荐文章于 2021-07-07 16:37:29 发布

zhongyuan332

最新推荐文章于 2021-07-07 16:37:29 发布

阅读量694

点赞数

文章标签： jquery ajax javascript 动态联动列表

本文链接：https://blog.csdn.net/zhongyuan332/article/details/48394669

版权

接手项目半个多月了，遇到好多问题，一直没怎么记住，今天写一个关于二级联动列表，动态获取后台数据库然后显示，好了废话不多说，先上效果图

列表项是在js文件中通过ajax获取的后台数据

<select id="carbrand"
										onChange="getMainmodel(this.selectedIndex)"
										style="border: 1px solid rgb(204, 204, 204);">
										<option value="-1">
											请选择品牌
										</option>
									</select>
<select id="carmodel"
                                        style="border: 1px solid rgb(204, 204, 204);">
                                        <option value="-1">
                                            请选择系列
                                        </option>
                                    </select>

这是一级列表然后通过ajax获取

	$.ajax( {
		url : "commonCodeAction_getCarLibAndCommonCodeInfo.action",
		dataType : "json",
		type : "post",
		success : function(data) {
			carMainModel = data.carMainModel;
			//console.log(data);
			carBrand = data.carBrand;
			var brandoption = "";
			/*
			 * for(var i=0;i<data.rows.length;i++){
				
				for(var y=0;y<data.child.length;y++){
					console.log(data.rows[i].id+"==="+data.child[y].classId);
					if(data.rows[i].id==data.child[y].classId){
						itemrows[i]+="<a href='#' οnclick=''>"+data.child[y].name+"</a>";
					}
				}
				
				if(i%2==0){
					$('.wxby').append("<dl><dt value='"+i+"'>"+data.rows[i].name+"</dt><dd id='dd"+i+"'></dd></dl>");
				}else{
					$('.zsgz').append("<dl><dt value='"+i+"'>"+data.rows[i].name+"</dt><dd id='dd"+i+"'></dd></dl>");
				}
				var id1="dd"+i;
				$('#'+id1).append(itemrows[i]);
				console.log($('#'+id1).append(itemrows[i]));
				//classrows+="<dl><dt value='"+data.rows[i].id+"'>"+data.rows[i].name+"</dt><dd></dd></dl>";
			}
			 */

			//$('.zsgz').append(classrows);
			//console.log(classrows);
			for ( var i = 0; i < data.carBrand.length; i++) {
				brandoption += "<option value='" + data.carBrand[i].id + "'>"
						+ data.carBrand[i].brandname + "</option>";
				for ( var y = 0; y < carMainModel[i].length; y++) {
					modeloption[i] += "<option text='1' value='"
							+ carMainModel[i][y].id + "'>"
							+ carMainModel[i][y].mainmodelname + "</option>";
				}
			}
			//console.log(modeloption[1]);
			$('#carbrand').append(brandoption);
		}
	});

上面ajax获取到的数据父类放到brandoption 子类放到modeloption 通过getMainModel方法进行选择

function getMainmodel(index) {
	var brandid0 = index - 1;
	if (brandid0 === -1) {
		$('#carmodel option[text="1"]').remove();
	} else {
		$('#carmodel option[text="1"]').remove();
		$('#carmodel').append(modeloption[brandid0]);
	}
};

大体上就是这样至于后台获取就不写出来以后用到再研究供自己学习之用