HTML级联下拉菜单实现

4星 · 超过85%的资源需积分: 20 14 浏览量更新于2024-09-11 1 收藏 2KB TXT 举报

"HTML级联效果" 这篇文档是针对初学者的HTML级联下拉列表的教程，适合刚入门的程序员了解和学习。级联效果在网页表单中常见，用于创建联动选择，如省份和城市的选择，当用户选择一个省份时，城市下拉列表会动态更新展示与该省份相关的城市。在提供的代码片段中，主要展示了如何使用JavaScript来实现这个功能。首先，我们看到`<script>`标签内定义了两个函数：`provinceInit()`和`provinceChange()`。`provinceInit()`函数用于初始化省份下拉列表，而`provinceChange()`函数则在省份选项改变时触发，更新城市下拉列表。 1. **provinceInit() 函数**： - 这个函数首先通过`getElementById()`获取到省份（province）的`<select>`元素。 - 清空已有选项（options）：`node.options.length=1;`。 - 创建新的选项（option）并添加到省份下拉列表中，这里使用了一个数组`provinceArr`存储省份名称，通过循环遍历数组，创建新选项并设置其值和文本。 2. **provinceChange() 函数**： - 当省份下拉列表的值改变时，此函数会被调用。 - 获取当前选中的省份值：`var proValue = document.getElementById("province").value;`。 - 清空城市（city）下拉列表的选项：`node.options.length=1;`。 - 使用城市数据（cityList）根据省份值动态创建城市选项。cityList是一个对象，键是省份名，值是对应的数组，包含各个城市。 - 遍历cityList中对应省份的数组，创建新的城市选项并添加到城市下拉列表中。 3. **HTML 结构**：在示例中，有两个`<select>`元素，分别代表省份和城市。省份的`<select>`有一个id为"province"，城市的是"id=city"。省份的选择会触发`onchange`事件，调用`provinceChange()`函数。 4. **级联效果的实现原理**： - 用户在页面加载完成后，`provinceInit()`初始化省份列表。 - 用户选择省份时，`onchange`事件触发，`provinceChange()`根据选定的省份值查找相应的城市数据，并更新城市列表。 - 由于JavaScript运行在客户端，这种实时更新的效果无需额外的服务器请求，提高了用户体验。 5. **注意事项**： - 为了确保级联效果正常工作，确保`<script>`标签内的JavaScript代码在HTML结构加载完成后再执行，可以将脚本放在`<body>`标签的底部或使用`window.onload`来延迟执行。 - 在实际项目中，城市数据可能需要从服务器动态获取，这可以通过Ajax请求实现。这个文档提供了一个基础的HTML级联下拉列表的实现方法，通过JavaScript动态更新下拉列表，是Web开发中常见的交互设计，对于初学者来说是一个很好的实践案例。

<html>

<head>

<title>JS中的级联功能</title>
<script type="text/javascript">
//初始化省份
window.onload = function provinceInit()
{
var node = document.getElementByIdx("province");
//var provinceArr = new Array("四川","山东","湖北");
var provinceArr = ["四川省","山东省","湖北省"];
node.options.length = 1;//设置下拉的个数
var newOption;
for(var i in provinceArr){
//option["value值","页面显示值"]
newOption = new Option(provinceArr[i],provinceArr[i]);
//node.add(newOption);
//循环添加到node
node.options.add(newOption);
}
}
//省份改变的时候,为city下拉赋值
function provinceChange()
{
var node=document.getElementByIdx("city");
var cityList = new Array();
cityList["四川省"] = ["成都","绵阳","德阳","自贡","广安","雅安","眉山"];
cityList["山东省"] = ["济南","青岛","淄博","枣庄","东营","烟台","潍坊"];
cityList["湖北省"] = ["武汉","宜昌","荆州","恩施","黄石","荆门","黄冈"];

下载后可阅读完整内容，剩余1页未读，立即下载

al928546849

粉丝: 0
资源: 1

HTML级联下拉菜单实现

省市级联 html组件

超级简单的一个HTML二级联动.HTML

三级级联菜单（JS+HTML)

JSP级联效果JSP级联效果JSP级联效果JSP级联效果JSP级联效果JSP级联效果

页面做级联效果

jquery菜单级联效果

jsp dwr级联效果代码

jquery 实现级联效果!

bootstrap treeview级联效果demo

买车票城市级联效果

最新资源