带输出的HTML5下拉菜单

ohhiloveyouu

我正在使用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.提交按钮后,从下拉菜单中选择一个数字,将输出汽车名称供用户查看。

Ben A. Noone

这是一种方法。

在您选择的ID上输入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);
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章