成果要求

代码展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下拉列表</title><script src="../jQuery/jquery-3.6.0.min.js"></script><script>$(function (){var provinces=["黑龙江","吉林","辽宁"];var citys=[["哈尔滨","鹤岗","齐齐哈尔"],["四平","辽源","通化","吉林"],["沈阳","大连"]];var p=$("#province");for (var i=0;i<provinces.length;i++){var div=$("<option>");div.append(provinces[i]);p.append(div);}p.change(function (){$("#city").empty();var proid=-1;for (var i=0;i<provinces.length;i++){if (this.value==provinces[i]){proid=i;}}for (var i=0;i<citys[proid].length;i++){var div1=$("<option>");div1.append(citys[proid][i]);$("#city").append(div1);}})})</script></head>
<body><div align="center"><select id="province" style="width: 100px"><option></option></select>省<select id="city" style="width: 100px"></select>市
</div></body>
</html>

Jquery完成连动下拉列表相关推荐

使用Jquery，完成连动下拉列表
使用Jquery,完成连动下拉列表代码展示: <!doctype html> <html lang="en"><head><title& ...
java下拉框查询_[Java教程]jQuery实现联动下拉列表查询框
[Java教程]jQuery实现联动下拉列表查询框 0 2015-12-07 18:00:04 厂商:请选择品牌:请选择型号:请选择效果如下: 本文网址:http://www.shaoqun.c ...
html下拉菜单jq怎么设置,jquery+css实现下拉列表功能
废话不多说了,直接给大家贴代码了,具体代码如下所述: fruit .hide { display: none; } div { float: left; width: 100%; } .selecto ...
html邮箱下拉栏,jQuery实现邮箱下拉列表自动补全功能
记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填 ...
Jquery 连动下拉列表
阅读目录预览源码预览源码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
jquery案例10——下拉列表显示、二级菜单
一.案例效果二.案例完成代码(方法多种) <!DOCTYPE html> <html lang="en"><head><meta cha ...
JQuery 多选下拉列表左右移动
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
jQuery下拉菜单美化插件
下载地址一款用于美化下拉列表菜单控件的jquery插件ddlist.使用该ddlist下拉列表美化插件可以为下拉列表添加图标,增强下拉列表的默认功能等.在美化的同时使下拉列表功能得到增强.HTML结 ...
WEB开发文档2 总结
转自:http://blog.donews.com/lvjiyong/archive/2006/06/29/931071.aspx 怎样将后台生成的在内存中的图象显示到客户端 Microsoft IE ...

Jquery完成连动下拉列表

Jquery完成连动下拉列表

成果要求

代码展示

Jquery完成连动下拉列表相关推荐

最新文章

热门文章