css+jsシミュレーション可変長ドロップダウン選択ボックス/ドロップダウンオプション長さが長すぎる場合は改行可能

12538 ワード
html PHP css
画像名1を用意します.gif
このhtmlと同じパスの下に置いて、このHTMLを開けて効果を見ることができます
このコードは、ドロップダウン・リスト・データの動的ロードにも適用されます.具体的な方法は具体的に分析できます.皆さん、私と議論してください.
phpで試してみました.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style>


.div_1{
height:100;
overflow-x:hidden;
overflow-y:scroll;
cellspacing:0px;
cellpadding:0px;
}

.table_1{
top:0px;
width:100%;
heigth:20;
border:1;
font-size:14px;
cellspacing:0px;
cellpadding:0px;
}
.tr_1{
heigth:20;
width:100%;
cursor:default;
}

</style>

<script>
function moveon(obj){
obj.background = "i.gif";
obj.style.color = "#FFFFFF";
}

function out(obj){
obj.background = "";
obj.style.color = "";
}

function selected(textobj,obj,divobj){
document.getElementById(textobj).value=obj.firstChild.nodeValue;
document.getElementById(divobj).style.display="none";
}


function showdiv(obj){
document.getElementById(obj).style.display="";
}


function showdiv_here(listid,obj,num){

if(num>15){
document.getElementById(listid).style.overflowY="scroll";
document.getElementById(listid).style.height = num*15;
}else{
document.getElementById(listid).style.overflowY="hidden";
document.getElementById(listid).style.height = num*24;
}
document.getElementById(obj).style.display="";

}

function leave(divobj){
document.getElementById(divobj).style.display="none";
}
</script>

</head>

<body cellspacing=0 cellpadding=0> 


<table border=1>
<tr>
<td>        15   ，      ，        </td>
<td>
<input type="text" id="name1" value="" onclick="showdiv_here('listdiv','showlist1',4);"  enable="false" onblur="leave('showlist1');"></input>
<div id="A" style="position:relative">

<div id="showlist1" style="display:none;position:absolute;left:0px;top:0px" >
<table  border=0 cellspacing=0 cellpadding=1>
   <tr>
     <td bgcolor="#000000">
<table  bgcolor="#FFFFFF" border=0 cellspacing=0 cellpadding=0>
   <tr>
     <td>
<div id="listdiv" class="div_1">
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name1',this,'showlist1')">123456789123456789123456789123456789123456789123456789</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name1',this,'showlist1')">1ssssssssssssssssssssssssssssssssssssssssssssss</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name1',this,'showlist1')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name1',this,'showlist1')">3</td></tr></table>
</div>
     </td>
   </tr>
</table>
     </td>
   </tr>
</table>
</div >
</div>
</td>
</tr>

<tr>
<td>  15         </td>
<td>
<input type="text" id="name3" value="" onclick="showdiv_here('listdiv3','showlist3',17);"  enable="false" onblur="leave('showlist3');"></input>
<div id="A" style="position:relative">

<div id="showlist3" style="display:none;position:absolute;left:0px;top:0px" >
<table  border=0 cellspacing=0 cellpadding=1>
   <tr>
     <td bgcolor="#000000">
<table  bgcolor="#FFFFFF" border=0 cellspacing=0 cellpadding=0>
   <tr>
     <td>
<div id="listdiv3" class="div_1">
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">1</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">22222222222222222111111111111</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">3</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">1</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')"></td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">3</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">1</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')"></td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">3</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">1</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')"></td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">3</td></tr></table>
</div>
     </td>
   </tr>
</table>
     </td>
   </tr>
</table>
</div >
</div>
</td>
</tr>

<tr>
<td>       ，    </td>

<td>
<input type="text" id="name" value="" onclick="showdiv('showlist');"  enable="false" onblur="leave('showlist');"></input>
<div id="A" style="position:relative">

<div id="showlist" style="display:none;width:300px;position:absolute;left:0px;top:0px" >
<table style="width:100%;" border=0 cellspacing=0 cellpadding=1>
   <tr>
     <td bgcolor="#000000">
<table style="width:100%" bgcolor="#FFFFFF" border=0 cellspacing=0 cellpadding=0>
   <tr>
     <td>
<div class="div_1">
<table class="table_1" style="word-break:break-all;"><tr><td  onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name',this,'showlist')">123456789123456789123456789123456789123456789123456789</td></tr></table>
<table class="table_1"><tr><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name',this,'showlist')">1ssssssssssssssssssssssssssssssssssssssssssssss</td></tr></table>
<table class="table_1"><tr><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name',this,'showlist')">2</td></tr></table>
<table class="table_1"><tr><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name',this,'showlist')">3</td></tr></table>
<table class="table_1"><tr><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name',this,'showlist')">4</td></tr></table>
<table class="table_1"><tr><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name',this,'showlist')">5</td></tr></table>
</div>
     </td>
   </tr>
</table>
     </td>
   </tr>
</table>
</div >
</div>
</td>
</tr>
</table>

</body>
</html>

ドロップダウンボタンと具体的なドロップダウンリストのイベント処理は、みんなで改善すれば使えます.
【Swift】RxSwift勉強してみたPart4
.Net Core商城マイクロサービスプロジェクトシリーズ(十一):MQ消費者は独立してWindowサービス+メッセージ処理サービス