Question

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

示例，我有：

<!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.当提交按钮，并从下拉菜单中选择一个数字时，将输出汽车名称供用户查看。

Answer 1

这是一种方式。

在您的选择中添加ID。例如：

<select id="carNames">

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

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

在这里它变得有趣。在JavaScript脚本标记中定义一个获取select值的函数。

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

带输出的HTML5下拉菜单

1 个答案: