带输出的 HTML5 下拉菜单

【问题标题】：HTML5 Drop Down Menu with output带输出的 HTML5 下拉菜单
【发布时间】：2014-04-10 08:23:35
【问题描述】：

我正在使用 HTML5 和 CSS 创建一个网站。我正在尝试创建一个下拉菜单，我有代码。但是，我的代码只生成一个下拉菜单。如何添加“开始”按钮，以便在选择选项并按下“开始”按钮时，输出与下拉菜单值相关的答案。

例如，我有：

<!DOCTYPE html>
<html>
    <head>
        <title> My Project</title>
    </head>
    <body>
        <select>
            <option value="volvo">1</option>
            <option value="saab">2</option>
            <option value="mercedes">3</option>
            <option value="audi">4</option>
        </select>
    </body>
</html>

我该怎么做： 1.添加提交按钮。 2. 提交按钮后，从下拉菜单中选择一个数字，输出车名供用户查看。

【问题讨论】：

标签： css html drop-down-menu web

【解决方案1】：

这是一种方法。

在您的选择上添加一个 id。例如：

<select id="carNames">

使用 onclick JavaScript 函数调用创建一个按钮。

<button onclick="showCarName();" >Go</button>

这里很有趣。在 JavaScript 脚本标签中定义一个获取您选择的值的函数。

function showCarName(){
      //First grab your select
    var select = document.getElementById("carNames");
      //Then get it's value
    var carName = select.value;
      //After that you just need to write it somewhere in the document
    document.write(carName);
}

【讨论】：

我可能误解了你的代码，但我没有使用 JavaScript，只是 HTML5 和 CSS。我只能使用 JavaScript 创建这种下拉菜单吗？
是的，您将需要 JavaScript 或 Php 或可以运行脚本的东西。