如何在下拉菜单中显示您选择的数据？答案

【问题标题】：How to display the data you choose on a dropdown menu?如何在下拉菜单中显示您选择的数据？
【发布时间】：2016-07-20 21:42:29
【问题描述】：

目前我有一个下拉菜单。此下拉菜单将显示我的数据库的一列数据。这对我来说很好。

但是，我想实现此功能：当用户单击下拉菜单中的一个选项时，页面将为用户提供一个包含他单击的选项的短语，例如“您选择 [他单击的选项]！”。

我应该怎么做才能做到这一点？

这是我的下拉菜单代码：

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
    background-color: #3D85C6;
    color: white;
    font-family:  sans-serif;
    font-weight: bold;
    font-size: 18px;
    padding: 18px;
    border: none;
    cursor: pointer; }

.dropdown {
    position: left;
    display: inline-block; }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }

.dropdown-content a {
    color: black;
    font-family:  sans-serif;
    padding: 12px 16px;
    text-decoration: none;
    display: block; }

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block; }

.dropdown:hover .dropbtn {
    background-color: #3D85C6; }
</style>
</head>
<body>
<div class="dropdown">
    <button class="dropbtn">Orgnazitions</button>     
    <div class="dropdown-content">
        <?php
            $db = new mysqli('localhost:8889', 'root', 'root', 'VBS');

            if($db->connect_errno > 0){
                die('Unable to connect to database [' . $db->connect_error . ']');
            }

            $sql = "SELECT * FROM Orgnazition";

            if (!$result = $db->query($sql)){
                die('There was an error running the query [' . $db->error . ']');
            }

            while ($row = $result->fetch_assoc()) {
                echo "<a href='choose.php'>".$row['OrgName']."</a>";
             } ?>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

使用 Javascript，而不是 PHP。 ----> onclick 显示选择的选项
Get selected value in dropdown list using JavaScript?的可能重复

标签： php html css dropdown

【解决方案1】：

要解决您的问题，您需要添加 javaScript 代码，因为您无法使用 CSS 更改其他元素的 html 文本。

如果您愿意，我可以向您展示 jQuery 中的解决方案。

我也可以给你一个我自己制作的下拉列表。

解决办法如下：

使用 jQuery 你只需要这样做：

$(".options").click(function () { //click event on the option var text_to_show = $(this).html(); //saves the option into a variable $("#show_result_id").html("Your answer:" + text_to_show); //displays the answer on your page });

这应该适合你。如果您有任何问题，请发表评论。

【讨论】：

如果可能的话，你能告诉我你的解决方案吗？谢谢！
在什么情况下这看起来像是对问题的回答？
我明天给你看。 @RiggsFolly 是的，我也不确定，但我不知道他对 javascript 或 jQuery 有多满意。可能他只需要知道它是用js完成的，然后就可以自己解决问题。但是像这样我现在可以帮助他了。