JS曲线解决option过长
yqxbc 发布时间:08-29 来源:一起学编程 浏览:27次

JS曲线解决option过长  

方法1:

<span>
<input name=iData size=10><input type=button onclick=showSel(true) value=v>
<br>

<select id=qswh size=10 style=position:absolute;display:none onchange=selText(iData)>
<option>1
<option>12
<option>123
<option>1234
<option>12345
<option>123456
<option>1234567
<option>12345678
<option>123456789
<option>1234567890
<option>12345678909
<option>123456789098
<option>1234567890987
<option>12345678909876
<option>123456789098765
<option>1234567890987654
<option>12345678909876543
<option>123456789098765432
<option>1234567890987654321
</select>
</span>


<script>
function document.onclick(){
showSel(false)
}
function showSel(flag){
document.all.qswh.style.display=(flag?"block":"none")
window.event.cancelBubble=true;
}
function selText(obj){
obj.value=(document.all.qswh.options[document.all.qswh.selectedIndex].text)
//showSel(false)
}
</script>

方法2:

<p>  
<input   readonly   style="width:120"   name=mselect   onmouseover="showt(this)"   onmouseout="hideTitle(this)"><input   type=button   value="6"   style="font-family:webdings;font-size:9px"   onclick="droplist(this)">  
</p>  
<p   id=p1   style="display:none;overflow:auto;height:expression(50*15);width:expression(document.all.mselect.offsetWidth+18);">    
<select name=s1 size=6 style="width:expression(document.all.mselect.offsetWidth);"   onmousemove="showTitle(this);"   onmouseout="hideTitle(this);"   onclick="schange(this);">    
<option>aaaaaaaaaaaaaaaaaaaaaa1    
<option>bbbbbbbbbbbbbbbbbbbbbbbbb1    
<option>cccccccccccccccccccccccc1    
<option>ddddddddddddddddddddddd1    
<option>eeeeeeeeeeeeeeeeeeeeeee1    
<option>fffffffffffffffffffffffffff1    
</select>    
</p>    
<script>    
document.all.mselect.value=document.all.s1.options[0].text  
   
//定义Popup    
var   oP=window.createPopup();    
oP.document.body.style.background="beige";    
//popup是否已显示    
var   oPShow=0;    
function   showTitle(obj){    
var   h=event.offsetY;    
var   fontsize=(obj.style.fontSize==""?(obj.currentStyle.fontSize==""?"9":obj.currentStyle.fontSize):obj.style.fontSize);    
fontsize=parseInt(fontsize)*1.6;    
var   l=parseInt(h/fontsize);    
oP.document.body.innerText=obj.options[l].text;    
len=obj.options[l].text.length*8;    
oP.show(event.offsetX+20,event.offsetY+fontsize+5,len,fontsize,document.body);    
oPShow=1;    
}    
function   hideTitle(obj){    
if(oPShow==1)oP.hide();    
}    
function   showt(obj){  
oP.document.body.innerText=obj.value  
var   len=obj.value.length*8;    
oP.show(event.offsetX+20,event.offsetY+20,len,15,document.body);    
oPShow=1;    
}  
function   schange(obj){  
document.all.mselect.value=obj.options[obj.selectedIndex].text;  
obj.parentElement.style.display='none';  
}  
function   droplist(obj)  
{  
event.cancelBubble=true  
p1.style.top=document.all.mselect.getBoundingClientRect().top;  
p1.style.left=document.all.mselect.getBoundingClientRect().left;  
p1.style.display=''  
document.all.mselect.focus();  
}  
document.body.onclick=function(){  
      p1.style.display='none'  
}  
</script>

方法3:

<p style="overflow:auto;height:expression(5*15);width:expression(document.all.s1.offsetWidth+18);">
<select name=s1 size=6 style="width:120" onmousemove="showTitle(this);" onmouseout="hideTitle(this);">
<option>aaaaaaaaaaaaaaaaaaaaaa1
<option>bbbbbbbbbbbbbbbbbbbbbbbbb1
<option>cccccccccccccccccccccccc1
<option>ddddddddddddddddddddddd1
<option>eeeeeeeeeeeeeeeeeeeeeee1
<option>fffffffffffffffffffffffffff1
</select>
</p>
<script>
//定义Popup
var oP=window.createPopup();
oP.document.body.style.background="beige";
//popup是否已显示
var oPShow=0;
function showTitle(obj){
var h=event.offsetY;
var fontsize=(obj.style.fontSize==""?(obj.currentStyle.fontSize==""?"9":obj.currentStyle.fontSize):obj.style.fontSize);
fontsize=parseInt(fontsize)*1.6;
var l=parseInt(h/fontsize);
oP.document.body.innerText=obj.options[l].text;
len=obj.options[l].text.length*8;
oP.show(event.offsetX+20,event.offsetY+fontsize+5,len,fontsize,document.body);
oPShow=1;
}
function hideTitle(obj){
if(oPShow==1)oP.hide();
}
</script>

如果你有好的win10资讯或者win10教程,以及win10相关的问题想要获得win10系统下载的关注与报道。
欢迎加入发送邮件到657025171#qq.com(#替换为@)。期待你的好消息!