使用带有 HTML 的 Javascript 来获取选定的选项并根据值显示字符串答案

【问题标题】：Using Javascript with HTML to get a selected option and display a String based on value使用带有 HTML 的 Javascript 来获取选定的选项并根据值显示字符串
【发布时间】：2016-10-20 20:49:50
【问题描述】：

抱歉，如果之前有人问过这个问题，我已经环顾四周（这个网站和其他几个网站）寻找示例和 sn-ps 代码，但似乎没有任何效果。

我正在学习 HTML 课程，作业需要使用脚本检查 ddl 并根据所选选项显示一行文本。问题是我在网上找到的内容似乎与我们老师提供的示例有些不同（如果有影响，我们使用的是 Dreamweaver 2015。）

这是我从几个不同线程中蚕食代码几个小时后遇到的问题。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <title> Hot Buns </title>
 </head>

<script type="text/javascript">
function showDetails()
        {
         var x= document.getElementById("slctOrder");
         var val= x.options[x.selectedIndex].text; 
<!-- DW only displays item(n) and len after the dot, I typed in "text" manually -->
         document.forms["frmOrder"]["Details"].value = val;
<!-- I'm just trying to have it display anything at this point, 
same as above, I typed "value" since DW doesn't seem to recognize this code 
(this is from the teacher's example) -->
        }

</script>
<body>
<p> <h2> Welcome to Hot Buns </h2> <br> <h3> Ham can we bee'f service? </h3></p>
<p> <h2> Place an order </h2> </p>
<form method="get" name="frmOder">
<select name="slctOrder" onChange="showDetails();"> 
<!-- I'm trying to call the function showDetails() 
but neither onChange here nor onClick in the option tag seem to accomplish that -->
    <option hidden selected="selected" value="0"> please select one of today's specials </option>
    <option value="1" onClick="showDetails();"> Last of the Mo-jicama </option>
    <option value="2" onClick="showDetails();"> Cheesus Is Born Burger </option>
    <option value="3" onClick="showDetails();"> Beets of Burden Burger </option>
    <option value="4" onClick="showDetails();"> Paranormal Pepper Jack-tivity Burger </option>
</select>

<output name="Details"/>
</form>

</body>
</html>

【问题讨论】：

这有什么问题？什么不工作？

标签： javascript html

【解决方案1】：

几个小的改动，但这里是工作示例：

更新：将选定的值输出到 html 元素 vs 警报中。

更新 2：我已更改代码以与您所拥有的完全匹配，但修复了一些错误以使其正常工作。

1) 您的表单名称“frmOder”有错字，但在您的代码中，您使用了“frmOrder”。

document.forms["frmOder"]["Details"].value = val;

2) 您尝试通过 id 选择元素，但 id 属性不存在：

document.getElementById("slctOrder");

不得不改变：

<select name="slctOrder" onChange="showDetails();">

到：

<select id="slctOrder" onChange="showDetails();">

3) 选项标签中不需要 onclick 事件。

我在原始答案中切换出“输出”元素的原因是它不是 IE 中支持的标签。 http://www.w3schools.com/tags/tag_output.asp

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <title> Hot Buns </title>
 </head>

<script type="text/javascript">
function showDetails()
        {
         var x= document.getElementById("slctOrder");
         var val= x.options[x.selectedIndex].text; 

         document.forms["frmOder"]["Details"].value = val;
        }

</script>
<body>
<p> <h2> Welcome to Hot Buns </h2> <br> <h3> Ham can we bee'f service? </h3></p>
<p> <h2> Place an order </h2> </p>
<form method="get" name="frmOder">
<select id="slctOrder" onChange="showDetails();"> 
<!-- I'm trying to call the function showDetails() 
but neither onChange here nor onClick in the option tag seem to accomplish that -->
    <option hidden selected="selected" value="0"> please select one of today's specials </option>
    <option value="1"> Last of the Mo-jicama </option>
    <option value="2"> Cheesus Is Born Burger </option>
    <option value="3"> Beets of Burden Burger </option>
    <option value="4"> Paranormal Pepper Jack-tivity Burger </option>
</select>

<output name="Details"/>
</form>

</body>
</html>

【讨论】：

感谢您的更正，但我试图在 VBasic 等效的标签中显示文本，这就是我尝试在表单中使用的原因。我只是无法让它以我需要的方式与脚本交互（点后没有“值”出现）。
更新代码以在 html 元素与警报提示中显示所选值。文本显示在选择菜单的正下方。
正是我需要的。这个 div （元素？）通常在 HTML 中用作标签（静态文本框）吗？在示例中，老师使用此标签来显示文本，脚本可以与其“value”属性交互，但我的出于某种原因不会。这里是老师的函数： { x= document.forms["myform"]["textinput"].value; document.forms["myform"]["result"].value = x; }。很抱歉打扰了，但我想知道为什么我的功能不像老师的那样工作。
更新了答案以匹配您的设置，并添加了更多详细信息，说明您的原始代码为何不像您的老师那样工作。

【解决方案2】：

您可以简化标记（此处更改的部分）和代码，添加事件侦听器。

标记（修订）

<form method="get" id="frmOder">
  <select id="slctOrder">
    <option hidden selected="selected" value="0"> please select one of today's specials </option>
    <option value="1"> Last of the Mo-jicama </option>
    <option value="2"> Cheesus Is Born Burger </option>
    <option value="3"> Beets of Burden Burger </option>
    <option value="4"> Paranormal Pepper Jack-tivity Burger </option>
  </select>
  <output id="Details" />
</form>

代码

function showDetails(event) {
  console.log(event);
  // var x = document.getElementById("slctOrder");
  var x = event.srcElement;// same as above but use the event
  var val = x.options[x.selectedIndex].text;

  // no need for above, just get the text value (assumes single select)
  var t = event.srcElement.selectedOptions[0].text;
  document.getElementById("Details").value = t;
}
// add event listener to select
var el = document.getElementById("slctOrder");

el.addEventListener("change", showDetails, false);

请注意，您仍然可以使用名称来选择：（但它返回一个集合，因此第一个需要 [0]）

document.getElementsByName("slctOrder")[0];

使用的小提琴示例：https://jsfiddle.net/MarkSchultheiss/j28cpsg9/

【讨论】：

welp.. 这对我来说几乎太先进了，但我想我明白了。这个感觉.. 自然并打开了更多选项（假设还有更多事件可与其他元素一起使用），我将查找更多细节并对其进行修改，直到我掌握了它的工作原理。感谢您向我介绍 JsFiddle，这些有用的东西。
事件是现代网页的关键，从这里开始：developer.mozilla.org/en-US/docs/Web/Events - 从一个简单的按钮和一个“点击”事件开始学习，这里有很多好东西。点击：developer.mozilla.org/en-US/docs/Web/Events/click