How to display the data you choose on a dropdown menu?

Question

At the moment I have a dropdown menu. This dropdown menu will display one column of data of my database. This works fine for me.

However, I want achieve this functionality: when the user clicks one option in the dropdown menu the page will give the user a phrase containing the option he clicked, like this "You choose [the option he clicked]!".

What should I do to achieve this?

This is my dropdown menu code:

<!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>

Use Javascript to accomplish this, not PHP. ----> onclick display selected option — The One and Only ChemistryBlob, Jul 20 '16 at 21:58
Possible duplicate of [Get selected value in dropdown list using JavaScript?](http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — The One and Only ChemistryBlob, Jul 21 '16 at 16:42

web_fool · Answer 1 · 2016-07-21T19:15:46.087

-1

To solve your problem you need to add javaScript code because you can't change html text from other elements with CSS.

I could show you a solution in jQuery if you want me to.

Also I could give you a dropdown list that I made by myself.

Here's the solution:

With jQuery you just need to do this:

$(".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 });

This should work for you. If you have any questions, just comment.

edited Jul 21 '16 at 19:15

answered Jul 20 '16 at 21:54

web_fool

1
2

If possible can you show me your solution? Thank you! – W.YAO Jul 20 '16 at 22:25
In what world does this look like an ANSWER to a question? – RiggsFolly Jul 20 '16 at 23:15
I will show you tomorrow. @RiggsFolly yea, wasn't sure too, but I didn't know how comfortable he is with javascript or jQuery. Could've been that he just needed to know that it's done with js and then could've solved the problem by himself. But like this I'm able to help him now. – web_fool Jul 21 '16 at 00:17

How to display the data you choose on a dropdown menu?

1 Answers1