2016-07-20 10 views
0

現在、私にはドロップダウンメニューがあります。このドロップダウンメニューには、データベースの1列分のデータが表示されます。これは私のためにうまく動作します。ドロップダウンメニューで選択したデータを表示する方法は?

しかし、私はこの機能を実現したいと思います。ユーザーがドロップダウンメニューで1つのオプションをクリックすると、クリックしたオプションを含むフレーズがページに表示されます。

これを達成するにはどうすればよいですか?

これは私のドロップダウンメニューのコードです:

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

PHPではなく、これを行うにはJavaScriptを使用します。 ----> onclickで選択したオプションを表示 –

+0

[JavaScriptを使用してドロップダウンリストで選択した値を取得しますか?](http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using -javascript) –

答えて

-1

あなたはCSSと他の要素からHTMLテキストを変更することはできませんので、JavaScriptコードを追加する必要がありあなたの問題を解決するために。

私が望むなら、私はあなたに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 });

これはあなたのために働く必要があります

はここソリューションです。ご質問がありましたら、ただコメントしてください。

+0

可能であれば、あなたの解決策を教えてください。ありがとうございました! –

+0

これは質問に答えるとどのような世界のように見えますか? – RiggsFolly

+0

明日お見せします。 @RiggsFollyいや、あまりにも確かではありませんでしたが、彼がjavascriptやjQueryでどれくらい快適であるかわかりませんでした。彼はちょうどそれがjsで終わったことを知っている必要があったかもしれませんでしたし、その後、自分で問題を解決することができました。しかし、このように今私は彼を助けることができます。 –

関連する問題