HTML & Javascript - 选择下拉菜单选项时显示文本答案

【问题标题】：HTML & Javascript - make text appear when dropdown menu option selectedHTML & Javascript - 选择下拉菜单选项时显示文本
【发布时间】：2020-05-14 05:21:29
【问题描述】：

所以我是 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.");
    }
}

【问题讨论】：

我看到的第一件事是你得到ElementById("dropdown") 其中dropdown 是一个类名
第二件事你的init()函数在哪里？我看到你在打电话，但代码在哪里。另外，虽然这可能是相关的，但我没有看到你在哪里称呼你的 optionClicked()。
您的 onclick 函数也需要是正确的名称。 getElementById("list").value 应该是正确的 userPicked
div 为 div.innerHTML 存储在哪里？

标签： javascript html button drop-down-menu dropdown

【解决方案1】：

正如评论中所指出的，您需要像这样处理正确的 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>

【讨论】：

【解决方案2】：

您可以使用 Object 文字按选择的值存储您的消息。
不要使用内联 JS。很难调试。
使用addEventListener()
使用正确的元素 ID

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>

【讨论】：

【解决方案3】：

我通过使用 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>

【讨论】：