ドロップダウンでCSSのユーザーの画像と名前が表示される

イメージを持つユーザーを含むドロップダウンボックスを作成したいとします。この画像のように：クレジット：剣道。私は必要な場合はCSSとjsだけでこのタイプのドロップダウンを作成したいと思います。これはプラグインなしで行うことができますか？ここでドロップダウンでCSSのユーザーの画像と名前が表示される

が出データベースとPHPから私のサンプルです：

$link=mysqli_connect('127.0.0.1','user','pass'); 
 
mysqli_select_db($link,"db"); 
 
$Sunshine_Award=mysqli_query($link,"select * from Sunshine_Award"); 
 
echo "<select style="width:161px; height: 33px; border-radius: 5px;"/>"; 
 
while($Sunshine_Rows=mysqli_fetch_array($Sunshine_Award)) 
 
\t \t { 
 
\t \t \t 
 

 
\t \t \t echo "<option>".$Sunshine_Rows['name']."</option>"; 
 
      
 

 
\t \t } 
 
echo "</select>";

出典

2017-12-09 Rae Ian

Stackoverflowはコード記述サービスではありません。それを自分で行ってから、立ち往生すれば元に戻ります。 –

はい私はサンプル出力を持っています。私はここにデータベースから多くのユーザが入っているドロップダウンを持っていますが、実際このタイプのCSSコードに問題があります。 –

あなたが持っているコードを投稿できますか？ –

$(document).ready(function(){ 
 
    $("#flip").click(function(){ 
 
     $("#panel").slideToggle("slow"); 
 
    }); 
 
});

<style> 
 
#panel, #flip { 
 
    padding: 5px; 
 
    text-align: center; 
 
    background-color: green; 
 
    border: solid 1px blue; 
 
} 
 

 
#panel { 
 
    padding: 50px; 
 
    display: none; 
 
} 
 
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    
 
<div id="flip">Click to slide down panel</div> 
 
<div id="panel"> 
 

 
<div id=users>user name</div><div id=users>user name</div></div> 
 
</body>

はinsidユーザー名&画像を挿入するには、サーバー側のプログラムを使用しますe #panel

出典

2017-12-09 13:09:33

こんにちは。これはコンボボックスなので、おそらく動作していないユーザーの1人を選択しようとすると動作します –

div要素にアクティブなCSSを追加するだけです –

ドロップダウンでCSSのユーザーの画像と名前が表示される

答えて

関連する問題