根据选择的下拉菜单输出浏览器文本

Outputting browser text depending on dropdown selected

本文关键字:输出 浏览器 文本 下拉菜单 选择      更新时间:2023-09-26
<script type="text/javascript">
Running = "For beginner to professional marathon runners";
Paragliding = "For all those interested in the extreme sport of paragliding";
Swimming = "For all levels of swimming enthusiasts";
function dropdownTip(value){  
document.getElementById("result").innerHTML = value;
}</script>

我试图根据用户选择的类别从变量输出文本。我如何改变"值"是一个变量字符串命名,而不是?还是有更好的方法?

<form action="submit.php" method="post">
<select onChange="dropdownTip(this.value)" select name="input"> 
<option value="Athletics:">Athletics:</option>
<option value="Running">Running</option>
<option value="Paragliding">Paragliding</option>
<option value="Swimming">Swimming</option>
</select> 
<input type="Submit" value="Next">
</form>
<!-- Text output here !-->
<div id="result"></div>

见解感激。

如果我们认为HTML标记是固定的,那么JavaScript代码需要将字符串(如" Running ")映射到其他字符串(如" For beginners to professional marathon runners")。最好使用将第一类字符串作为属性,将第二类字符串作为属性值的对象:

var explanation = {
  Athletics: "For atheletes",
  Running: "For beginner to professional marathon runners",
  Paragliding: "For all those interested in the extreme sport of paragliding",
  Swimming: "For all levels of swimming enthusiasts"
}
function dropdownTip(value){  
  document.getElementById("result").innerHTML = explanation[value];
}