[英]HTML & Javascript - make text appear when dropdown menu option selected
所以我是 html/javascript 的新手，我正在尝试弄清楚如何让我的下拉菜单正常工作。 外观方面看起来不错，但是当我单击任何选项时，我试图弄清楚如何根据我选择的选项更改页面布局。 因此，例如，如果我选择选项 1 并单击“选择”按钮，我希望显示常规文本，说“您单击了选项 1”。 我试图实现它，但它没有做任何事情。 如果我在没有选择选项的情况下单击“选择”，则会弹出一条错误消息。 我真的很感激一些帮助或朝着正确方向推动。
选项.html：
<html>
<head>
<title>Welcome</title>
</head>
<body onload="init()">
<div><h1>Welcome</h1></div><br />
<div class="dropdown">
<form>
<select name="list" id="list" accesskey="target">
<option value="none">Pick an option</option>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
</select>
<input type=button value="Select" onclick="goToNewPage()" />
</form>
</div>
</div>
<script src="options.js"></script>
<link rel="stylesheet" href="dropdown.css">
</body>
</html>
选项.js：
function optionClicked(){
let userPicked = document.getElementById("dropdown").value;
if(userPicked == 'one'){
div.innerHTML = "You clicked option 1";
}else if(userPicked == 'two'){
div.innerHTML = "You clicked option 2.";
}else if(userPicked == 'three'){
div.innerHTML = "You clicked option 3.";
}else{
alert("You must pick an option.");
}
}
正如评论中所指出的，您需要像这样处理正确的 id 和函数名称：
function optionClicked(){ let userPicked = document.getElementById("list").value; var div = document.getElementById("div"); if(userPicked == 'one'){ div.innerHTML = "You clicked option 1"; }else if(userPicked == 'two'){ div.innerHTML = "You clicked option 2."; }else if(userPicked == 'three'){ div.innerHTML = "You clicked option 3."; }else{ alert("You must pick an option."); } }
<html> <head> <title>Welcome</title> </head> <body> <div><h1>Welcome</h1></div><br /> <div class="dropdown"> <form> <select name="list" id="list" accesskey="target"> <option value="none">Pick an option</option> <option value="one">Option 1</option> <option value="two">Option 2</option> <option value="three">Option 3</option> </select> <input type=button value="Select" onclick="optionClicked()" /> </form> </div> </div> <div id="div"></div> <script src="options.js"></script> <link rel="stylesheet" href="dropdown.css"> </body> </html>
addEventListener() const EL_list = document.querySelector('#list'); const EL_select = document.querySelector('#select'); const EL_response = document.querySelector('#response'); const messages = { none: "You must pick an option.", one: "You selected option 1", two: "You selected option 2", three: "You selected option 3", }; EL_select.addEventListener('click', evt => { const val = EL_list.value; const msg = messages[val]; if (val==='none') alert(msg); else EL_response.textContent = msg; });
<div class="dropdown"> <select name="list" id="list"> <option value="none">Pick an option</option> <option value="one">Option 1</option> <option value="two">Option 2</option> <option value="three">Option 3</option> </select> <input id="select" type="button" value="Select"> <div id="response"></div> </div>
我通过使用 jquery 解决了这个问题。 此外，您的 html 代码有一个杂散的div结束标记。 你应该检查一下。
<html>
<head>
<title>Welcome</title>
</head>
<body>
<div><h1>Welcome</h1></div><br />
<div class="dropdown">
<form>
<select name="list" id="list" >
<option value="none">Pick an option</option>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
</select>
<input type=button value="Select" onclick="optionClicked()" />
</form>
</div>
<div id="div"></div>
<script src='jquery.min.js'></script> <!-- include jquery-->
<script>
function optionClicked()
{
var userPicked = $(`#list`).children("option").filter(":selected").val().trim();
switch(userPicked)
{
case 'one': div.innerHTML = "You clicked option 1"; break;
case 'two': div.innerHTML = "You clicked option 2."; break;
case 'three': div.innerHTML = "You clicked option 3."; break;
default:
alert("You must pick an option."); break;
}
}
</script>
<link rel="stylesheet" href="dropdown.css">
</body>
</html>
Javascript 从下拉菜单中选择选项时将文本添加到空 div
[英]Javascript add text to an empty div when option is selected from dropdown menu
如何使用javascript从下拉菜单中将默认输出文本设置为选定的选项
[英]How to set default output text to selected option from dropdown menu using javascript
在html中选择某些选项时如何使某些输入字段出现？
[英]How to make certain input fields appear when selected certain option in html?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.