Home > Article > Web Front-end > Use H5 to create a drop-down box with special effects
Use H5 to create a drop-down box with special effects
- php中世界最好的语言Original
- 2017-12-04 09:42:205978browse
Today I will teach you how to use H5 to make a drop-down box with small special effects. When you click on the content of the drop-down box, a small special effect will appear in the text field. Let's take a look at the detailed case code.
There is a drop-down box in HTML, including "wind, rain, thunder, lightning", add an event, when wind is selected, a selection appears in the text field
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form name="form_name" >
<select name="select_name" onChange="ShowToText(); " >
<option value="1">风</option>
<option value="2">雨</option>
<option value="3">雷</option>
<option value="4">电</option>
</select><br>
<textarea rows="3" cols="30"name="textfield_name3">
</textarea>
</form>
</body>
<script language="JavaScript">
function ShowToText(){
document.form_name.textfield_name3.value=document.form_name.select_name.options[document.form_name.select_name.selectedIndex].text
}
</script>
</html>Running effect
I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
Notes on table nesting in HTML
Details of HTML5 tag nesting rules Introduction
html5 tutorial on making moon cake eating game
The above is the detailed content of Use H5 to create a drop-down box with special effects. For more information, please follow other related articles on the PHP Chinese website!