How to use JavaScript to create a dynamic drop-down menu effect
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>利用二维数组创建动态下拉菜单</title>
<script type="text/javascript">
//定义一个二维数组aCity,用于存储城市名称
var aCity=new Array();
aCity[0]=new Array();
aCity[1]=new Array();
aCity[2]=new Array();
aCity[3]=new Array();
aCity[4]=new Array();
aCity[5]=new Array(); //赋值,每个省份的城市存放在用于数组的一行
aCity[0][0]="--请选择--";
aCity[1][0]="--请选择--";
aCity[1][1]="东城区";
aCity[1][2]="西城区";
aCity[1][3]="朝阳区";
aCity[1][4]="海淀区";
aCity[1][5]="丰台区";
aCity[2][0]="--请选择--";
aCity[2][1]="福田区";
aCity[2][2]="罗湖区";
aCity[2][3]="南山区";
aCity[2][4]="宝安区";
aCity[2][5]="龙岗区";
aCity[2][6]="盐田区";
aCity[3][0]="--请选择--";
aCity[3][1]="越秀区";
aCity[3][2]="东山区";
aCity[3][3]="海珠区";
aCity[3][4]="荔湾区";
aCity[3][5]="天河区";
aCity[3][6]="白云区";
aCity[4][0]="--请选择--";
aCity[4][1]="西湖区";
aCity[4][2]="上城区";
aCity[4][3]="下城区";
aCity[4][4]="江干区";
aCity[4][5]="拱墅区";
aCity[4][6]="滨江区";
aCity[5][0]="--请选择--";
aCity[5][1]="新城区";
aCity[5][2]="碑林区";
aCity[5][3]="莲湖区";
aCity[5][4]="雁塔区";
aCity[5][5]="灞桥区";
aCity[5][6]="长安区";
aCity[5][7]="周至县";
function ChangeCity(){
var i,iProvinceIndex;
iProvinceIndex=document.frm.optProvince.selectedIndex;
iCityCount=0;
while(aCity[iProvinceIndex][iCityCount]!=null)
iCityCount++; //计算选定省份的城市个数
document.frm.optCity.length=iCityCount; //改变下拉菜单的选项数
for(i = 0;i<=iCityCount-1;i++) //改变下拉菜单的内容
document.frm.optCity[i]=new Option(aCity[iProvinceIndex][i]);
document.frm.optCity.focus();
} </script></head><body onfocus="ChangeCity()">
<h3>选择省份及城市</h3>
<form name="frm">
<p>省份: <select name="optProvince" size="1" onchange="ChangeCity()">
<option>--请选择--</option>
<option>北京市</option>
<option>深圳市</option>
<option>广州市</option>
<option>杭州市</option>
<option>西安市</option>
</select>
</p>
<p>城市:
<select name="optCity" size="1">
<option>--请选择--</option>
</select>
</p>
</form></body></html>The above is the detailed content of How to use JavaScript to create a dynamic drop-down menu effect. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to create pixel art in GIMP
Feb 19, 2024 pm 03:24 PM
This article will interest you if you are interested in using GIMP for pixel art creation on Windows. GIMP is a well-known graphics editing software that is not only free and open source, but also helps users create beautiful images and designs easily. In addition to being suitable for beginners and professional designers alike, GIMP can also be used to create pixel art, a form of digital art that utilizes pixels as the only building blocks for drawing and creating. How to Create Pixel Art in GIMP Here are the main steps to create pixel pictures using GIMP on a Windows PC: Download and install GIMP, then launch the application. Create a new image. Resize width and height. Select the pencil tool. Set the brush type to pixels. set up
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
How to create a family with Gree+
Mar 01, 2024 pm 12:40 PM
Many friends expressed that they want to know how to create a family in Gree+ software. Here is the operation method for you. Friends who want to know more, come and take a look with me. First, open the Gree+ software on your mobile phone and log in. Then, in the options bar at the bottom of the page, click the "My" option on the far right to enter the personal account page. 2. After coming to my page, there is a "Create Family" option under "Family". After finding it, click on it to enter. 3. Next jump to the page to create a family, enter the family name to be set in the input box according to the prompts, and click the "Save" button in the upper right corner after entering it. 4. Finally, a "save successfully" prompt will pop up at the bottom of the page, indicating that the family has been successfully created.
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
Dec 18, 2023 pm 03:39 PM
With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese
How to create a folder on Realme Phone?
Mar 23, 2024 pm 02:30 PM
Title: Realme Phone Beginner’s Guide: How to Create Folders on Realme Phone? In today's society, mobile phones have become an indispensable tool in people's lives. As a popular smartphone brand, Realme Phone is loved by users for its simple and practical operating system. In the process of using Realme phones, many people may encounter situations where they need to organize files and applications on their phones, and creating folders is an effective way. This article will introduce how to create folders on Realme phones to help users better manage their phone content. No.
How to Create a Contact Poster for Your iPhone
Mar 02, 2024 am 11:30 AM
In iOS17, Apple has added a contact poster feature to its commonly used Phone and Contacts apps. This feature allows users to set personalized posters for each contact, making the address book more visual and personal. Contact posters can help users identify and locate specific contacts more quickly, improving user experience. Through this feature, users can add specific pictures or logos to each contact according to their preferences and needs, making the address book interface more vivid. Apple in iOS17 provides iPhone users with a novel way to express themselves, and added a personalizable contact poster. The Contact Poster feature allows you to display unique, personalized content when calling other iPhone users. you
A first look at Django: Create your first Django project using the command line
Feb 19, 2024 am 09:56 AM
Start the journey of Django project: start from the command line and create your first Django project. Django is a powerful and flexible web application framework. It is based on Python and provides many tools and functions needed to develop web applications. This article will lead you to create your first Django project starting from the command line. Before starting, make sure you have Python and Django installed. Step 1: Create the project directory First, open the command line window and create a new directory
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
