使用Javascript和HTML获取所选选项并基于值显示字符串_Javascript_Html

使用Javascript和HTML获取所选选项并基于值显示字符串

javascript html

使用Javascript和HTML获取所选选项并基于值显示字符串,javascript,html,Javascript,Html,很抱歉，如果以前有人问过这个问题，我已经环顾了一下（这个网站和其他几个网站）的示例和代码片段，但似乎没有任何效果我正在学习HTML课程，作业要求使用脚本检查ddl并根据所选选项显示一行文本。问题是，我在网上发现的与我们老师提供的例子似乎有点不同（如果有区别的话，我们使用的是Dreamweaver 2015）以下是我在几个小时从几个不同的线程中分解代码后遇到的问题 <!doctype html> <html> <head> <meta charset=

很抱歉，如果以前有人问过这个问题，我已经环顾了一下（这个网站和其他几个网站）的示例和代码片段，但似乎没有任何效果

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


热面包
函数showDetails（）
{
var x=document.getElementById（“slctOrder”）；
var val=x.options[x.selectedIndex]。文本；
文件。表格[“frmOrder”][“Details”]。值=val；
}
欢迎光临热面包
火腿，我们能为您服务吗
下单
请选择今天的特色菜
最后一个Mo jicama
芝士生来就是汉堡包
甜菜汉堡
超自然胡椒杰克活力汉堡

有几个小改动，但下面是工作示例：

更新：将所选值输出到html元素vs alert

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

1）您输入的表单名为“frmOder”，但在代码中使用了“frmOder”

2）您正在尝试按id选择元素，但id属性不存在：

document.getElementById("slctOrder");

必须改变：

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

致：

3）选项标记中不需要onclick事件

我在原始答案中去掉“output”元素的原因是它在IE中不是受支持的标记。


热面包
函数showDetails（）
{
var x=document.getElementById（“slctOrder”）；
var val=x.options[x.selectedIndex]。文本；
文件。表格[“frmOder”][“Details”]。值=val；
}
欢迎光临热面包
火腿，我们能为您服务吗
下单
请选择今天的特色菜
最后一个Mo jicama
芝士生来就是汉堡包
甜菜汉堡
超自然胡椒杰克活力汉堡

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

加价（修订版）

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

要玩的小提琴示例：

它有什么问题？什么不起作用？感谢您的更正，但我正在尝试以VBasic标签的等效形式显示文本，这就是为什么我尝试在表单中使用。我只是不能让它以我需要的方式与脚本交互（点后没有显示“值”）。更新代码以在html元素vs alert提示符中显示所选值。文本显示在选择菜单的正下方。正是我所需要的。这个div（元素？）在HTML中通常用作标签（静态文本框）吗？在这个例子中，老师使用这个标记来显示文本，脚本可以与其“value”属性交互，但我的由于某种原因不能交互。这是教师的函数：{x=document.forms[“myform”][“textinput”].value；document.forms[“myform”][“result”].value=x；}。很抱歉给您带来麻烦，但我想知道为什么我的函数没有像老师的那样工作。更新了答案以匹配您的设置，并添加了更多详细信息，说明为什么您的原始代码没有像老师那样工作。欢迎。。这对我来说太高级了，但我想我明白了。这个感觉。。自然，并打开了更多的选项（假设还有更多的事件与其他元素一起使用），我只需查找更多细节并对其进行修补，直到掌握其工作原理。感谢您向我介绍JSFIDLE，这是非常有用的东西。事件是现代网页的关键，从这里开始：-从一个简单的按钮和一个“点击”事件开始学习，这里有很多好东西。点击：

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

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

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

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