<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
::-webkit-input-placeholder{
text-align: center;
}
#emailInput{
text-align: center;
}
#home{
width: 100% ;
text-align-last: center;
}
td{
text-align: center;
}
#email{
width:auto;
height:24px;
line-height:24px;
text-align:center;
text-align-last: center;
}
#submit{
width: 30%;
}
</style>
<script>
window.onload = function(){
var email = document.getElementById("email");
var options = email.options;
var emailInput = document.getElementById("emailInput");
email.onclick = function(){
if(email.selectedIndex=="0"){
emailInput.value = "";
}
if(email.selectedIndex=="1"){
emailInput.value = "@qq.com";
}
if(email.selectedIndex=="2"){
emailInput.value = "@163.com";
}
if(email.selectedIndex=="3"){
emailInput.value = "@126.com";
}
}
}
</script>
<body>
<form method="GET" action="">
<table id="table" border="1" cellspacing="0" align="center" >
<tr>
<td>
用户名：
</td>
<td>
<input type="text" placeholder="请输入用户名">
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<td>
居住地：
</td>
<td>
<select id="home">
<option value="LiaoNing">
辽宁
</option>
<option value="SiChuan">
四川
</option>
<option value="JiangSu">
江苏
</option>
<option value="Fujian">
福建
</option>
</select>
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="radio" value="男" name="sex" checked>男
<input type="radio" value="女" name="sex">女
</td>
</tr>
<tr>
<td>
<select id="email" >
<option value="0" selected >邮箱</option>
<option value="1">QQ邮箱</option>
<option value="2">新浪邮箱</option>
<option value="3">网易邮箱</option>
</select>
</td>
<td>
<input type="text" placeholder="请输入你的邮箱" id="emailInput">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" id="submit" >
</td>
</tr>
</table>
</form>
</body>
</html>
通过选择邮箱类型，输入框中自动输出对应的邮箱格式。
思路：通过select的对应索引判断
JS代码如下：
<script>
window.onload = function(){
var email = document.getElementById("email");
var options = email.options;
var emailInput = document.getElementById("emailInput");
email.onclick = function(){
if(email.selectedIndex=="0"){
emailInput.value = "";
}
if(email.selectedIndex=="1"){
emailInput.value = "@qq.com";
}
if(email.selectedIndex=="2"){
emailInput.value = "@163.com";
}
if(email.selectedIndex=="3"){
emailInput.value = "@126.com";
}
}
}
</script>
<tr>
<td>
<select id="email" >
<option value="0" selected >邮箱</option>
<option value="1">QQ邮箱</option>
<option value="2">新浪邮箱</option>
<option value="3">网易邮箱</option>
</select>
</td>
<td>
<input type="text" placeholder="请输入你的邮箱" id="emailInput">
</td>
</tr>
原文：https://www.cnblogs.com/mcf-666/p/13654363.html