因此，我是html / javascript的新手，我试图弄清楚如何使我的下拉菜单正常工作。外观上看起来不错，但是当我单击任何选项时，我试图弄清楚如何根据我选择的选项来更改页面的布局。因此，例如，如果我选择选项1并单击“选择”按钮，则希望显示常规文本并显示“您单击了选项1”。我试图实现它，但是它什么也没做。如果我单击“选择”而不选择任何选项，则应弹出错误消息。我非常感谢您的帮助或朝正确方向的推动。
options.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>
options.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>您首先要针对正确的元素。为了清楚起见，我将您的选择输入的类别更改为id，并提供了一个div容器来显示您的消息。还需要修改函数调用，因为与JS文件中的命名相比，命名已关闭。
此外，可以大大简化此代码。从占位符选项中删除该值。对它进行检查很简单。从那里可以添加一个条件，如果没有值，它将触发警报。
如果您正在根据顺序检查值，则无需任何漫长的条件。只需通过seelctedIndex根据所选值的文本创建一条消息。
const list = document.getElementById('list');
const message = document.getElementById('message');
function optionClicked() {
if (!list.value) {
alert('You must pick an option.');
return;
}
message.innerText = `You clicked option ${list.options[list.selectedIndex].text.toLowerCase()}`;
}<div>
<h1>Welcome</h1>
</div><br />
<div id="message"></div>
<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>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>