如何基于JavaScript中的菜单列表选项提交中的用户输入返回特定的字符串？

问题描述

我有下面的HTML代码，它只是一个默认选项的菜单列表，外加4个选项供用户选择，带有提交按钮。我试图弄清楚如何在单击“提交”按钮时编写JavaScript代码，该代码返回到用户选择的menulist选项，并返回与用户选择的选项相关的短语。一般而言，我是新手，所以请告知我是否需要提供其他相关信息（我试图使其简洁）。

代码：

<label for="investmentHorizon">Investment Horizon:</label>
<select id="investmentHorizon">
    <option value="default">How many years are you planning to invest for? 
</option>
    <option name='horizonOption' value="ultraShortTerm">Less than 1 year</option>
    <option name='horizonOption' value="shortTerm">Between 1 and 3 years</option>
    <option name='horizonOption' value="mediumTerm">Between 3 and 10 
years</option>
    <option name='horizonOption' value="longTerm">More than 10 years</option>
</select>

<input id='submit' type='submit' value='Submit' name=''>

解决方法

您可以看到您的代码here的有效示例（在控制台中查看以查看结果）

const NewComponent = ({ headline,logos}) => {
  return (
<div>
  <h2>{headline}</h2>
  <ul>
    {logos.map(item => {
      return (
        <li>
          <a href={item.link}>
            <img src={item.image} alt="" />
          </a>
        </li>
      );
    })}
  </ul>
</div>
)
})};

您正在寻找所谓的EventListener，它们是UI上的反应（单击，更改等）与脚本完成的可能的后端（或任何形式的特殊操作）之间的链接。

就您的信息而言，如果您在发布此内容之前至少进行了一些研究，将会得到社区的赞赏，因为这是一件相当简单的事情。

欢呼并继续学习！

,

您可以将此代码添加到// //并尝试理解它。我保持简单。

let btn = document.getElementById('submit');

btn.addEventListener('click',function(event) {
  event.preventDefault();
  
  let options = document.getElementsByTagName('option');
  
  console.log("ici")
  for(let i = 0; i < options.length; i++) {
    if(options[i].selected)
      console.log(options[i].innerHTML);
  }
});