複数列を表示するSelectBox

Question

現在、PHPにてシステムのサンプルを作成しているのですが、
マイクロソフトAccessのように複数列を表示selectboxを表示したいのですが、
Html、Jqueryでどうしたらできるか調べたのですが、わからなくて
困ってます。どなたか教示していただけたら幸いです。
宜しくお願いします。

下記のような感じになります。【accessの画面です。】

Comments

[yambejp]

コンボボックスのような感じですかね？
選択した場合表示はどうなるのでしょうか？

[2020tokyo]

コンボボックのような感じになります。
選択した場合は、社員番号からDBに検索をかけて
詳細を同一画面の下に表示します。
コンボの初回表示もDBからマスターを全件検索したものを表示してます。
宜しくお願い致します。

Answer 1

ちょー適当Ver

<style>
.combobox,.combobox div {
width:200px;
position:relative;
}
.combobox .wrap{
overflow-x:scroll;
position:absolute;
}
.combobox .wrap:not(.active){
display:none; 
}
.combobox table{
  border-collapse:collapse;
}
.combobox table td{
  background-Color:yellow;
}
.combobox table td:not(:first-child){
  border-left:solid 1px gray;
}
</style>
<script>
document.addEventListener('click',e=>{
  const t=e.target;
  const div=t.nextElementSibling?.closest('.wrap')||document.querySelector('div.active');
  if(t.closest('.combobox input')){
    div.classList.add('active');
  }else{
    div.classList.remove('active');
  }
  if(t.closest('.combobox td')){
    t.closest('.combobox').querySelector('input').value=t.closest('tr').dataset["value"];
  }
});
</script>
test<br>
test<br>
test<br>
<div class="combobox">
<input name="myBrowser">
<div class="wrap">
<table>
<tr data-value="001">
<td>001</td>
<td>hogehoge</td>
<td>123456</td>
<td>************</td>
</tr>
<tr data-value="002">
<td>002</td>
<td>fuga</td>
<td>7890123456</td>
<td>************</td>
</tr>
<tr data-value="003">
<td>003</td>
<td>piyopiyopiyo</td>
<td>789</td>
<td>************</td>
</tr>
</table>
</div>
</div>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>