使用Javascript和HTML获取选定的选项，并根据值显示字符串

Using Javascript with HTML to get a selected option and display a String based on value

本文关键字：字符串 显示 选项 Javascript HTML 获取 使用      更新时间：2023-09-26

抱歉，如果这个问题之前已经问过，我已经环顾四周(这个网站和其他几个)的例子和代码片段，但似乎没有工作。

我正在学习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>

一些小改动，但这里是工作示例:

update:将所选值输出到HTML元素vs alert.

更新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事件

我在原来的答案中切换出'output'元素的原因是因为它不是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>

您可以通过添加一个事件侦听器来简化标记(此处更改了部分)和代码。

标记(修订)

<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);

注意你仍然可以使用名称来select:(但它返回一个集合，所以第一个需要[0])

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

示例小提琴演奏:https://jsfiddle.net/MarkSchultheiss/j28cpsg9/

相关文章：