JQuery+JSON 生成联动多选和复选

最新推荐文章于 2023-03-19 17:52:48 发布

haohappy2

最新推荐文章于 2023-03-19 17:52:48 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

文章标签： json jQuery JavaScript PHP ViewUI

本文链接：https://blog.youkuaiyun.com/haohappy2/article/details/83777688

本文介绍了一种使用jQuery实现的动态加载下拉框内容的方法。当用户选择某个类别后，会通过AJAX从服务器获取相应的子类别，并更新两个不同的选择器：一个下拉框和一组复选框。此方法提高了用户体验并减少了页面加载时间。

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

话不多说，请看代码

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(function(){ 
		getSelectVal(); 
		getSelectVal2(); 
		$("#product_big_cat_id").change(function(){ 
			getSelectVal(); 
			getSelectVal2();
		}); 
	}); 
    function getSelectVal(){
        $.getJSON("server.php",{bigid:$("#product_big_cat_id").val()},function(json){ 
			var son_cat = $("#son_cat"); 
			$("option",son_cat).remove(); //清空原有的选项 
			$.each(json,function(index,array){ 
				var option = "<option value='"+array['id']+"'  "+array['selected']+">"+array['title']+"</option>"; 
				son_cat.append(option); 
			}); 
		}); 
	}
	function getSelectVal2(){
        $.getJSON("server.php",{bigid:$("#product_big_cat_id").val()},function(json){ 
			var son_cat = $("#son_cat2");
			var str="";
			son_cat.attr("innerHTML",''); 
			var n=0;
			$.each(json,function(index,array){ 
				n=n+1;
				var option = "<input type='checkbox' name='son_cat2[]' value='"+array['id']+"'  "+array['selected']+"/>"+array['title']+"&nbsp;&nbsp;&nbsp;&nbsp;";
				str=str+option;	
				if (n%4==0){
					str=str+"<br>";
				}		
			});
			son_cat.attr("innerHTML",str);
		}); 
	}
</script>