JQuery应用五：级联下拉框(JQuery与JSON)

最新推荐文章于 2026-01-08 11:36:55 发布
转载 最新推荐文章于 2026-01-08 11:36:55 发布 · 652 阅读 · 0
文章标签：

#jquery #json #function #class #html #stylesheet

本文详细介绍了前端开发的核心技术，重点阐述了JavaScript在网页交互、DOM操作、AJAX等领域的应用，以及如何利用jQuery简化开发过程。通过实例演示，帮助开发者掌握关键技能，提升前端开发效率。
 

页面如下：

Html代码   
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.        
  5.     <title>JQuery_Study_Select</title>  
  6.     <link rel="stylesheet" type="text/css" href="css/select.css">  
  7.     <script language="javascript" src="js/jquery-1.4.2.js"></script>  
  8.     <script language="javascript" src="js/select.js"></script>  
  9.   </head>  
  10.        
  11.   <body>  
  12.         <div class="loading">  
  13.             <p><img src="images/data-loading.gif" alt="数据装载中" /></p>  
  14.             <p>数据装载中......</p>  
  15.         </div>  
  16.         <div class="car">  
  17.             <span class="carname">  
  18.                 汽车厂商:   
  19.                 <select>  
  20.                     <option value="" selected="selected">请选择汽车厂商</option>  
  21.                     <option value="BMW">宝马</option>  
  22.                     <option value="Audi">奥迪</option>  
  23.                     <option value="VW">大众</option>  
  24.                 </select>  
  25.                 <img src="images/pfeil.gif" alt="有数据" />  
  26.             </span>  
  27.             <span class="cartype">  
  28.                 汽车类型:   
  29.                 <select></select>  
  30.                 <img src="images/pfeil.gif" alt="有数据" />  
  31.             </span>  
  32.             <span class="wheeltype">  
  33.                 车轮类型：   
  34.                 <select></select>  
  35.             </span>  
  36.         </div>  
  37.         <div class="carimage">  
  38.             <p><img src="images/img-loading.gif" alt="图片装载中" class="carloading" /></p>  
  39.             <p><img src="" alt="汽车图片" class="carimg"/></p>  
  40.         </div>  
  41.     </body>  
  42. </html>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>JQuery_Study_Select</title>
	<link rel="stylesheet" type="text/css" href="css/select.css">
	<script language="javascript" src="js/jquery-1.4.2.js"></script>
	<script language="javascript" src="js/select.js"></script>
  </head>
  	
  <body>
		<div class="loading">
			<p><img src="images/data-loading.gif" alt="数据装载中" /></p>
			<p>数据装载中......</p>
		</div>
		<div class="car">
			<span class="carname">
				汽车厂商:
				<select>
					<option value="" selected="selected">请选择汽车厂商</option>
					<option value="BMW">宝马</option>
					<option value="Audi">奥迪</option>
					<option value="VW">大众</option>
				</select>
				<img src="images/pfeil.gif" alt="有数据" />
			</span>
			<span class="cartype">
				汽车类型:
				<select></select>
				<img src="images/pfeil.gif" alt="有数据" />
			</span>
			<span class="wheeltype">
				车轮类型：
				<select></select>
			</span>
		</div>
		<div class="carimage">
			<p><img src="images/img-loading.gif" alt="图片装载中" class="carloading" /></p>
			<p><img src="" alt="汽车图片" class="carimg"/></p>
		</div>
	</body>
</html>

 css样式如下：

Html代码   
  1. .loading {   
  2.     width: 400px;   
  3.     /*margin-left: auto;*/   
  4.     /*margin-right: auto;*/   
  5.     margin: 0 auto;   
  6.     visibility: hidden;    
  7. }   
  8. .loading p {   
  9.     text-align: center;   
  10. }   
  11. p {   
  12.     margin: 0;   
  13. }   
  14. .car {   
  15.     /*width: 500px;*/   
  16.     /*margin: 0 auto;*/   
  17.     text-align: center;   
  18. }   
  19. .carimage {   
  20.     text-align: center;   
  21. }   
  22. .cartype, .wheeltype, .carloading, .carimg, .car img {   
  23.     display: none;   
  24. }  
.loading {
	width: 400px;
	/*margin-left: auto;*/
	/*margin-right: auto;*/
	margin: 0 auto;
	visibility: hidden; 
}
.loading p {
	text-align: center;
}
p {
	margin: 0;
}
.car {
	/*width: 500px;*/
	/*margin: 0 auto;*/
	text-align: center;
}
.carimage {
	text-align: center;
}
.cartype, .wheeltype, .carloading, .carimg, .car img {
	display: none;
}

 js内容如下：

 

Html代码   
  1. $(document).ready(function(){   
  2.     //找到三个下接框   
  3.     var carnameSelect = $(".carname").children("select");   
  4.     var cartypeSelect = $(".cartype").children("select");   
  5.     var wheeltypeSelect = $(".wheeltype").children("select");   
  6.     var carimg = $(".carimg");   
  7.        
  8.     carnameSelect.change(function(){   
  9.         //val()方法：获得（设置）第一个匹配元素的当前值。   
  10.         var carnameValue = $(this).val();   
  11.         wheeltypeSelect.parent().hide();   
  12.         //attr(key,value)方法：为所有匹配的元素设置一个属性值。   
  13.         carimg.hide().attr("src","");   
  14.         if(carnameValue!=""){   
  15.             if(carnameSelect.data(carnameValue)) {//从缓存中取数据   
  16.                 var data = carnameSelect.data(carnameValue);   
  17.                 //html(val)：设置每一个匹配元素的html内容   
  18.                 cartypeSelect.html("");   
  19.                 if(data.length!=0){   
  20.                     $("<option value='' selected='selected'>"+'请选择汽车类型'+"</option>").appendTo(cartypeSelect);   
  21.                     for(var i=0;i<data.length;i++){   
  22.                         $("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(cartypeSelect);   
  23.                     }   
  24.                     carnameSelect.next().show();   
  25.                     cartypeSelect.parent().show();   
  26.                 }else{   
  27.                     carnameSelect.next().hide();   
  28.                     cartypeSelect.parent().hide();   
  29.                     wheeltypeSelect.parent().hide();   
  30.                 }   
  31.             }else {   
  32.                 //Ajax的post请求：   
  33.                 $.post("CarJsonServlet",{keyword:carnameValue,type:"top"},function(data){   
  34.                     cartypeSelect.html("");   
  35.                     if(data.length!=0){   
  36.                         $("<option value='' selected='selected'>"+'请选择汽车类型'+"</option>").appendTo(cartypeSelect);   
  37.                         for(var i=0;i<data.length;i++){   
  38.                             $("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(cartypeSelect);   
  39.                         }   
  40.                         carnameSelect.next().show();   
  41.                         cartypeSelect.parent().show();   
  42.                     }else{   
  43.                         carnameSelect.next().hide();   
  44.                         cartypeSelect.parent().hide();   
  45.                         wheeltypeSelect.parent().hide();   
  46.                     }   
  47.                     carnameSelect.data(carnameValue,data);   
  48.                 },"json");   
  49.             }   
  50.         }else{   
  51.             carnameSelect.next().hide();   
  52.             cartypeSelect.parent().hide();   
  53.             wheeltypeSelect.parent().hide();   
  54.         }   
  55.     });   
  56.        
  57.     cartypeSelect.change(function(){   
  58.         carimg.hide().attr("src","");   
  59.         var cartypeValue = $(this).val();   
  60.         if(cartypeValue !=""){   
  61.             if(cartypeSelect.data(cartypeValue)) {   
  62.                 var data = cartypeSelect.data(cartypeValue);   
  63.                 wheeltypeSelect.html("");   
  64.                 if(data.length!=0){   
  65.                     $("<option value='' selected='selected'>"+'请选择车轮类型'+"</option>").appendTo(wheeltypeSelect);   
  66.                     for(var i=0;i<data.length;i++){   
  67.                         $("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(wheeltypeSelect);   
  68.                     }   
  69.                     cartypeSelect.next().show();   
  70.                     wheeltypeSelect.parent().show();   
  71.                 }else{   
  72.                     cartypeSelect.next().hide();   
  73.                     wheeltypeSelect.parent().hide();   
  74.                 }   
  75.             }else {   
  76.                 $.post("CarJsonServlet",{keyword:cartypeValue,type:"sub"},function(data){   
  77.                     wheeltypeSelect.html("");   
  78.                     if(data.length!=0){   
  79.                         $("<option value='' selected='selected'>"+'请选择车轮类型'+"</option>").appendTo(wheeltypeSelect);   
  80.                         for(var i=0;i<data.length;i++){   
  81.                             $("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(wheeltypeSelect);   
  82.                         }   
  83.                         cartypeSelect.next().show();   
  84.                         wheeltypeSelect.parent().show();   
  85.                     }else{   
  86.                         cartypeSelect.next().hide();   
  87.                         wheeltypeSelect.parent().hide();   
  88.                     }   
  89.                     cartypeSelect.data(cartypeValue,data);   
  90.                 },"json");   
  91.             }   
  92.         }else{   
  93.             cartypeSelect.next().hide();   
  94.             wheeltypeSelect.parent().hide();   
  95.         }   
  96.     });   
  97.        
  98.     wheeltypeSelect.change(function(){   
  99.         var wheeltypeName = $(this).val();   
  100.         var cartypeName = cartypeSelect.val();   
  101.         var carnameName = carnameSelect.val();   
  102.         var carimgName = carnameName+"_"+cartypeName+"_"+wheeltypeName+".jpg";   
  103.         carimg.hide();//原来的图片隐藏   
  104.            
  105.         $(".carloading").show();   
  106.         var cachimage = new Image();   
  107.         $(cachimage).attr("src","images/"+carimgName);//预装载，预装载时显示load图片   
  108.         //carimg.attr("src","images/"+carimgName).show();   
  109.         $(cachimage).load(function(){//装载完之后执行的操作，页面会缓存图片   
  110.             $(".carloading").hide();   
  111.             carimg.attr("src","images/"+carimgName).show();//由于页面会缓存图片显示会很快   
  112.         });   
  113.     });   
  114.        
  115.     $(".loading").ajaxStart(function(){   
  116.         $(".loading").css("visibility","visible");   
  117.         $(".loading").animate({   
  118.             opacity: 1   
  119.         },0);   
  120.     }).ajaxStop(function(){   
  121.         //$(".loading").css("visibility","hidden");   
  122.         //$(".loading").fadeOut(500);   
  123.         $(".loading").animate({   
  124.             opacity: 0   
  125.         },500);   
  126.     });   
  127.        
  128. });  
$(document).ready(function(){
	//找到三个下接框
	var carnameSelect = $(".carname").children("select");
	var cartypeSelect = $(".cartype").children("select");
	var wheeltypeSelect = $(".wheeltype").children("select");
	var carimg = $(".carimg");
	
	carnameSelect.change(function(){
		//val()方法：获得（设置）第一个匹配元素的当前值。
		var carnameValue = $(this).val();
		wheeltypeSelect.parent().hide();
		//attr(key,value)方法：为所有匹配的元素设置一个属性值。
		carimg.hide().attr("src","");
		if(carnameValue!=""){
			if(carnameSelect.data(carnameValue)) {//从缓存中取数据
				var data = carnameSelect.data(carnameValue);
				//html(val)：设置每一个匹配元素的html内容
				cartypeSelect.html("");
				if(data.length!=0){
					$("<option value='' selected='selected'>"+'请选择汽车类型'+"</option>").appendTo(cartypeSelect);
					for(var i=0;i<data.length;i++){
						$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(cartypeSelect);
					}
					carnameSelect.next().show();
					cartypeSelect.parent().show();
				}else{
					carnameSelect.next().hide();
					cartypeSelect.parent().hide();
					wheeltypeSelect.parent().hide();
				}
			}else {
				//Ajax的post请求：
				$.post("CarJsonServlet",{keyword:carnameValue,type:"top"},function(data){
					cartypeSelect.html("");
					if(data.length!=0){
						$("<option value='' selected='selected'>"+'请选择汽车类型'+"</option>").appendTo(cartypeSelect);
						for(var i=0;i<data.length;i++){
							$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(cartypeSelect);
						}
						carnameSelect.next().show();
						cartypeSelect.parent().show();
					}else{
						carnameSelect.next().hide();
						cartypeSelect.parent().hide();
						wheeltypeSelect.parent().hide();
					}
					carnameSelect.data(carnameValue,data);
				},"json");
			}
		}else{
			carnameSelect.next().hide();
			cartypeSelect.parent().hide();
			wheeltypeSelect.parent().hide();
		}
	});
	
	cartypeSelect.change(function(){
		carimg.hide().attr("src","");
		var cartypeValue = $(this).val();
		if(cartypeValue !=""){
			if(cartypeSelect.data(cartypeValue)) {
				var data = cartypeSelect.data(cartypeValue);
				wheeltypeSelect.html("");
				if(data.length!=0){
					$("<option value='' selected='selected'>"+'请选择车轮类型'+"</option>").appendTo(wheeltypeSelect);
					for(var i=0;i<data.length;i++){
						$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(wheeltypeSelect);
					}
					cartypeSelect.next().show();
					wheeltypeSelect.parent().show();
				}else{
					cartypeSelect.next().hide();
					wheeltypeSelect.parent().hide();
				}
			}else {
				$.post("CarJsonServlet",{keyword:cartypeValue,type:"sub"},function(data){
					wheeltypeSelect.html("");
					if(data.length!=0){
						$("<option value='' selected='selected'>"+'请选择车轮类型'+"</option>").appendTo(wheeltypeSelect);
						for(var i=0;i<data.length;i++){
							$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(wheeltypeSelect);
						}
						cartypeSelect.next().show();
						wheeltypeSelect.parent().show();
					}else{
						cartypeSelect.next().hide();
						wheeltypeSelect.parent().hide();
					}
					cartypeSelect.data(cartypeValue,data);
				},"json");
			}
		}else{
			cartypeSelect.next().hide();
			wheeltypeSelect.parent().hide();
		}
	});
	
	wheeltypeSelect.change(function(){
		var wheeltypeName = $(this).val();
		var cartypeName = cartypeSelect.val();
		var carnameName = carnameSelect.val();
		var carimgName = carnameName+"_"+cartypeName+"_"+wheeltypeName+".jpg";
		carimg.hide();//原来的图片隐藏
		
		$(".carloading").show();
		var cachimage = new Image();
		$(cachimage).attr("src","images/"+carimgName);//预装载，预装载时显示load图片
		//carimg.attr("src","images/"+carimgName).show();
		$(cachimage).load(function(){//装载完之后执行的操作，页面会缓存图片
			$(".carloading").hide();
			carimg.attr("src","images/"+carimgName).show();//由于页面会缓存图片显示会很快
		});
	});
	
	$(".loading").ajaxStart(function(){
		$(".loading").css("visibility","visible");
		$(".loading").animate({
			opacity: 1
		},0);
	}).ajaxStop(function(){
		//$(".loading").css("visibility","hidden");
		//$(".loading").fadeOut(500);
		$(".loading").animate({
			opacity: 0
		},500);
	});
	
});

 servlet内空如下：

Java代码   
  1. public class CarJsonServlet extends HttpServlet {   
  2.   
  3.     /**  
  4.      *   
  5.      */  
  6.     private static final long serialVersionUID = 7438884867809030432L;   
  7.   
  8.     public void doGet(HttpServletRequest request, HttpServletResponse response)   
  9.             throws ServletException, IOException {   
  10.         this.doPost(request, response);   
  11.     }   
  12.   
  13.     public void doPost(HttpServletRequest request, HttpServletResponse response)   
  14.             throws ServletException, IOException {   
  15.         response.setContentType("text/html;charset=UTF-8");   
  16.         response.setHeader("Cache-Control", "no-cache");   
  17.   
  18.         String type = request.getParameter("type");   
  19.         String keyword = request.getParameter("keyword");   
  20.         StringBuffer jsonresult = new StringBuffer();   
  21.         JSONArray jsonArrayResult = new JSONArray();   
  22.         jsonresult.append("[");   
  23.         if ("top".equals(type)) {   
  24.             if ("BMW".equals(keyword)) {   
  25.             //  jsonresult.append("\"316ti\"");   
  26.             //  jsonresult.append(",\"6ercupe\"");   
  27.                 jsonArrayResult.add("316ti");   
  28.                 jsonArrayResult.add("6ercupe");   
  29.             } else if ("Audi".equals(keyword)) {   
  30.             //  jsonresult.append("\"tt\"");   
  31.                 jsonArrayResult.add("tt");   
  32.             } else if ("VW".equals(keyword)) {   
  33.             //  jsonresult.append("\"Golf\"");   
  34.                 jsonArrayResult.add("Golf4");   
  35.             }   
  36.         } else if ("sub".equals(type)) {   
  37.             if ("tt".equals(keyword)) {   
  38.                 jsonArrayResult.add("rha");   
  39.                 jsonArrayResult.add("rhb");   
  40.                 jsonArrayResult.add("rhc");   
  41.             } else if ("316ti".equals(keyword)) {   
  42.                 jsonArrayResult.add("rha");   
  43.                 jsonArrayResult.add("rhb");   
  44.             } else if ("6ercupe".equals(keyword)) {   
  45.                 jsonArrayResult.add("rha");   
  46.                 jsonArrayResult.add("rhb");   
  47.                 jsonArrayResult.add("rhc");   
  48.             } else if("Golf4".equals(keyword)){   
  49.                 jsonArrayResult.add("rha");   
  50.                 jsonArrayResult.add("rhb");   
  51.             }   
  52.         }   
  53.         //jsonresult.append("]");   
  54.         PrintWriter out = response.getWriter();   
  55.         out.write(jsonArrayResult.toString());   
  56.         out.flush();   
  57.         out.close();   
  58.     }   
  59.   
  60. }  
public class CarJsonServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 7438884867809030432L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		response.setHeader("Cache-Control", "no-cache");

		String type = request.getParameter("type");
		String keyword = request.getParameter("keyword");
		StringBuffer jsonresult = new StringBuffer();
		JSONArray jsonArrayResult = new JSONArray();
		jsonresult.append("[");
		if ("top".equals(type)) {
			if ("BMW".equals(keyword)) {
			//	jsonresult.append("\"316ti\"");
			//	jsonresult.append(",\"6ercupe\"");
				jsonArrayResult.add("316ti");
				jsonArrayResult.add("6ercupe");
			} else if ("Audi".equals(keyword)) {
			//	jsonresult.append("\"tt\"");
				jsonArrayResult.add("tt");
			} else if ("VW".equals(keyword)) {
			//	jsonresult.append("\"Golf\"");
				jsonArrayResult.add("Golf4");
			}
		} else if ("sub".equals(type)) {
			if ("tt".equals(keyword)) {
				jsonArrayResult.add("rha");
				jsonArrayResult.add("rhb");
				jsonArrayResult.add("rhc");
			} else if ("316ti".equals(keyword)) {
				jsonArrayResult.add("rha");
				jsonArrayResult.add("rhb");
			} else if ("6ercupe".equals(keyword)) {
				jsonArrayResult.add("rha");
				jsonArrayResult.add("rhb");
				jsonArrayResult.add("rhc");
			} else if("Golf4".equals(keyword)){
				jsonArrayResult.add("rha");
				jsonArrayResult.add("rhb");
			}
		}
		//jsonresult.append("]");
		PrintWriter out = response.getWriter();
		out.write(jsonArrayResult.toString());
		out.flush();
		out.close();
	}

}

 

web.xml中的servlet配置如下：

Xml代码   
  1. <servlet>  
  2.     <servlet-name>CarJsonServlet</servlet-name>  
  3.     <servlet-class>com.mengya.servlet.CarJsonServlet</servlet-class>  
  4.   </servlet>  
  5.   
  6.   <servlet-mapping>  
  7.     <servlet-name>CarJsonServlet</servlet-name>  
  8.     <url-pattern>/CarJsonServlet</url-pattern>  
  9.   </servlet-mapping>  
ilovel7
关注
jQuery实战5:级联下拉框效果
张翠山的博客
02-01 2248
今天来完成jQuery实战的级联下拉框的效果。效果功能如下： 页面默认只提供汽车厂商，当选择了具体的某品牌汽车，汽车类型下拉框就会动态的显示出来，选择对应的类型，然后出来该汽车类型对应的轮胎类型下拉框显示出来，选中轮胎类型，页面的正中间会显示出汽车的图片。
jQuery实战五：级联下拉框效果
杨晓尚
06-15 702
知识点 本节学到的jquery及其他开发知识： 1.img标签的alt属性要写上，在图片尚未装载进来或图片不存在时，这个属性的文字信息会显示出来。 2.select表示下拉框，下拉框的每一项都是一个option,option开始结尾标签中的内容会显示在页面上，value属性的值则是用于在jQuery中用val方法获取并发送给服务器的。定义了selectcted的属性值为selected时，表示当前...
JQuery——级联下拉框
王萌萌
01-19 4228
最近看JQuery视频，跟着实现了几个例子，整个过程中感觉不只是学到了新知识，更重新巩固了之前学习的内容，收获着实不小，今天小编敲的级联下拉框效果的视频，很喜欢这个效果，也把学习成果记录下来。     1.chainselect.html部分 JQuery实例-级联下拉框效果 数据装载中......
JQuery实战：级联下拉框
qq31748029910000的专栏
01-16 893
<br />html：<br /><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JQuery实例-级联下拉框效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type
html5 级联下拉列表,JQuery实现级联下拉框效果实例讲解
weixin_39856630的博客
06-03 415
用JQuery和select来实现汽车厂商和汽车类型的联动，参考过程如下效果图：逻辑分析图：html代码：级联下拉框效果汽车厂商：请选择汽车厂商宝马奥迪大众 汽车类型：css代码：.car {text-align:center;}.cartype{display:none;}js代码：$(document).ready(function(){//找到下拉框var carnameSelect ...
jquery实现四级级联下拉列表
你也想起舞吗的博客
12-10 647
开发环境 jdk 1.7 tomcat7 jquery-1.10 数据结构为单表通过parentid架构数据子父级关系 实现过程 通过ajax异步获取下拉列表的数据 intiSelect: function(parentCode){ var result; $.ajax({ url: _path, data: {"parentCode": parentCode}, type: "post", dataType: "json",
jquery ajax struts2 级联下拉框 动态生成省市
周馒头_资料
09-17 1738
代码只不包含数据库部分 js文件： /**  * author:zwl  * date:2013.9.17  */ function getProvince(){ jQuery.ajax({    url :"ajax/getProvince.action",     type : "post",    cache : false,    dataType : "json",
html5 级联下拉列表,Chained – jQuery/Zepto级联下拉框插件
weixin_30537231的博客
06-03 281
Chained – jQuery/Zepto级联下拉框插件分类：代码日期：2015-11-15点击(18,665)下载(0)来源：未知收藏简介Chained 是一款简单易用的级联下拉框插件，提供了 jQuery 和 Zepto 两个版本。Chained 支持无限级、支持 json 数据。基本使用1、引入文件如果你使用 zepto，除了引入 zepto 之外，还需要引入 zepto-selector...
使用JQuery和Servlet结合Json实现动态级联下拉框
### 知识点详解 ...通过综合应用Servlet、JQuery与JSON，可以有效解决Web开发中下拉框数据动态填充的问题，实现更加灵活和用户友好的界面。而对json-lib库的使用，则是连接Java后端与前端JavaScript的桥梁。
layui-级联下拉框-可配置开启多选-HTML源码
10-02
总之，这个"layui-级联下拉框-可配置开启多选-HTML源码"涵盖了HTML基础、CSS美化、JavaScript交互、layui框架应用、数据绑定和配置选项等多个方面，是一个实用的前端开发资源。通过学习和使用这个源码，开发者可以...
鸿蒙高性能动画库——lottie-turbo
liuhaikang的博客
01-04 1102
Lottie-Turbo是OpenHarmony平台的动画渲染库，支持解析Adobe After Effects导出的JSON格式动画。主要特性包括：1）支持本地文件、网络资源和JSON字符串三种动画加载方式；2）提供全局和单个动画控制功能，包括播放、暂停、跳帧等操作；3）支持动画事件监听、颜色修改、资源替换等高级功能；4）具备离屏渲染能力，可将动画帧转为图像数据。该库采用声明式语法，兼容API12+设备，支持并行化渲染，适用于各类应用场景中的Lottie动画展示需求。
淘宝商品SKU规格信息获取指南及item_skuAPI开放接口详解
z1205338073的博客
01-05 381
通过以上步骤，可高效集成淘宝SKU接口，实现商品数据的自动化管理。务必遵守《淘宝开放平台协议》，避免数据滥用或违规操作。：淘宝开放API文档页面。
Merge3D 三维引擎中 GeoJSON 数据加载的整体设计
huhuan123456的博客
01-08 472
Merge3D的GeoJsonLayer通过四层架构实现统一加载各类GeoJSON数据：1)数据标准化解析层，统一处理输入格式；2)几何类型映射层，将不同图形映射到统一Graphic基类；3)分层样式配置体系，管理通用和专属样式；4)抽象渲染管线，统一处理渲染和事件。这种"配置驱动"设计通过类型映射表和分层样式，使开发者无需关注底层差异，只需修改配置即可支持点、线、面及扩展类型，显著降低了开发复杂度。核心优势在于统一的接口设计和自动化的类型适配机制。
Chrome 小工具: 启动本地应用 (Native messaging)
男神的专栏
01-05 677
这里我们定义了 Native Messaging 的名字, 在path中定义了我们要执行的本地应用程序, allowed_origins 中长串的字符是我们插件的id 能够在安装插件后从google chrome 插件里看到(安装插件 能够在chrome中插件开启开发人员模式并加载我们之前的插件文件包)里面有一个简单的button， 这个button会启动方法, 新建一个名叫”myCustomEvent”的事件, 同一时候附带有我们要传的信息, 并公布这个事件。最近遇到一个新的问题。
闲鱼商品详情API接口指南
最新发布
Data_agent19970108018
01-08 594
摘要：闲鱼商品详情API（xianyu.item_get）提供二手商品全量结构化数据获取功能，支持通过商品ID查询标题、价格、成色等核心信息。该接口采用HMAC-SHA256签名认证，需在闲鱼开放平台完成开发者资质申请。适用于比价系统、交易监控等场景，调用需遵守限流规则（建议QPS≤5次/秒），并注意数据合规要求。接口返回JSON格式数据，包含基础信息、图文资源、交易属性等二手专属字段，时效性≤1分钟。Python示例代码展示了签名生成与请求处理流程，建议配合代理IP池和缓存机制使用以提升稳定性。
FastAPI 设计思想总结
AI大模型/Python/Java/MySQL技术栈，快来和我一起学习吧 ~
01-07 490
用 Python 的类型系统，以最少的代码，构建高性能、自文档化、类型安全的现代 Web API。组件类型所属项目在 FastAPI 中的角色FastAPI应用类FastAPI主应用容器，协调路由与元数据生成StarletteASGI 框架Starlette提供底层 HTTP/WebSocket/中间件能力Pydantic数据验证库Pydantic请求/响应模型定义、验证、序列化UvicornASGI 服务器Uvicorn运行 FastAPI 应用的生产级服务器APIRouter。
自搭建邮局，无限邮箱
数据小白的博客
01-06 751
Maildrop是一款保护隐私的临时邮局服务，可生成大量"阅后即焚"邮箱地址。该系统采用SMTP协议接收邮件，通过异步引擎高效处理并发连接，将原始邮件流解析为结构化JSON数据，并支持SQLite存储实现快速检索。核心功能包括：动态拦截垃圾邮件、递归解析MIME结构、自动清理过期邮箱、IP白名单防护等。Maildrop特别适合需要避免垃圾邮件轰炸、进行批量测试或保护主邮箱隐私的用户场景，为开发者提供了一个轻量级但功能完整的邮件处理解决方案。
Cesium 实现动态加载气象数据：渲染成动态雨雪/云层效果（源码 + 原理）
专注AI大模型,软件混淆,授权
01-05 41
本文介绍了在Cesium中实现动态天气效果的技术方案。核心思路是通过时间轴驱动多层数据动态切换，包括：1）时间维度处理，按序列加载不同气象图层；2）空间维度处理，将气象数据切分为瓦片；3）效果层实现，制作风场、降水等动态可视化效果。文章详细讲解了后端数据预处理（生成瓦片和风场JSON）、前端实现（双层雷达瓦片交替渐变、风场粒子系统）的具体方法，并提供了完整的代码示例。此外还探讨了雨雪粒子、云层效果等增强功能，以及工程化建议，为构建科学准确的动态天气可视化系统提供了实用解决方案。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值