有的时候 select 在html中为了美观 需要用css限定它的宽度
在ie6里面 这样会导致下拉的内容太小,没有办法现实全部的内容
领导要求解决
只好硬着头皮写了一段
Code
Code
// JScript File
//const part
var popupDDT_ComboBGColor="white"; //"Transparent" is recommanded The control bg color
var popupDDT_DefaultBGColor="white"; //Drop down menu default bg color
var popupDDT_DefaultFTColor="black"; //Drop down menu default font color
var popupDDT_ChangedBGColor="black"; //Drop down menu msover bg color
var popupDDT_ChangedFTColor="white"; //Drop down menu msover font color
var popupDDT_MaxWidth=6000 //max width without scroll
var popupDDT_MaxHeight=800 //max Height without scroll
var popupDDT_FontFamily=" Verdana, Arial;" //DropDown Menu Fonts family
var popupDDT_FontSize=" 8.25pt" // DropDown Menu Fonts size
var popupDDT_Height=17 //DropDown Menu line height
var DivTest = window.document.createElement ("div")
DivTest.id="popupDDT_temptestfield"
DivTest.style.width=DivTest.style.height=0
DivTest.style.overflow="hidden"
document.body.appendChild (DivTest)
var oPopup = window.createPopup();
var oPopupBody = oPopup.document.body;
function popupDDT_fillback(text,textid,value,valueid)
{
document.getElementById (textid).value =text
document.getElementById (valueid).value =value //change the value doesn't change the selection
var TargetSel =document.getElementById (valueid)
for (i=0 ;i<TargetSel.all.length;i++) //find the one would be selected
{
var sText =TargetSel[i].innerText
var sValue =TargetSel[i].Value
if (sValue==value)
{
TargetSel[i].Selected=true; //select!
break;
}
}
oPopup.hide()
}
function popupDDT_unfold()
{
var showIpt=event.srcElement
var valueIpt=showIpt.parentNode.firstChild ;
var strrslt = new String( )
var y = showIpt.clientHeight ;
var x =0;
var textid= showIpt.id
var valueid= valueIpt.id
for (i=0 ;i<valueIpt.all.length;i++)
{
var sText =valueIpt[i].innerText
var sValue =valueIpt[i].value
strrslt= strrslt + "<div style='text-align:left ;font-size:"+popupDDT_FontSize +";font-family:"+ popupDDT_FontFamily +";100%;height:"+ popupDDT_Height +"px;border-0 ;background-Color:"+popupDDT_DefaultBGColor+"' onmouseout=\"this.style.backgroundColor='" + popupDDT_DefaultBGColor +"';this.style.color ='" + popupDDT_DefaultFTColor +"'; \" onmouseover=\"this.style.backgroundColor='" + popupDDT_ChangedBGColor +"';this.style.color ='" + popupDDT_ChangedFTColor +"'; \" onclick=\"parent.popupDDT_fillback ('"+sText+"','"+ textid +"','"+ sValue +"' ,'"+ valueid +"' )\">"+ sText +"</div>"
// strrslt= strrslt + "<input type='button' style='text-align:left ;font-size:"+popupDDT_FontSize +";font-family:"+ popupDDT_FontFamily +";100%;height:17px;border-0 ;background-Color:"+popupDDT_DefaultBGColor+"' onmouseout=\"this.style.backgroundColor='" + popupDDT_DefaultBGColor +"';this.style.color ='" + popupDDT_DefaultFTColor +"'; \" onmouseover=\"this.style.backgroundColor='" + popupDDT_ChangedBGColor +"';this.style.color ='" + popupDDT_ChangedFTColor +"'; \" onclick=\"parent.popupDDT_fillback ('"+sText+"','"+ textid +"','"+ sValue +"' ,'"+ valueid +"' )\" value=\""+ sText +"\"/><br />"
}
popupDDT_temptestfield.innerHTML = "<select ID='popupDDT_testselect' name='testselect' >" + valueIpt.innerHTML + "</select>"
var testselect =document.getElementById ("popupDDT_testselect")
testselect.style.fontSize =popupDDT_FontSize
testselect.style.fontFamily =popupDDT_FontFamily
var Wid = testselect.clientWidth -popupDDT_Height
var Hei =valueIpt.all.length * popupDDT_Height + 2
if (Wid > popupDDT_MaxWidth ) {Wid=popupDDT_MaxWidth}
if (Wid < showIpt.clientWidth +1 ) {Wid=showIpt.clientWidth +1}
if (Hei > popupDDT_MaxHeight ) {Hei=popupDDT_MaxHeight}
oPopupBody.noWrap=true
oPopupBody.innerHTML = " <div id='testfield' style='cursor:default;border-style :solid ;border-width :1;overflow:auto;100%;Height:100%'>" + strrslt + "</div>"
oPopup.show(x, y,Wid,Hei ,showIpt );
}
function popupDDT_Init(oSelect)
{
if ( "popupDDT_Span_" + oSelect.id !=oSelect.parentNode.id)
{
var DivOuter = window.document.createElement ("span")
DivOuter.id= "popupDDT_Span_" + oSelect.id
oSelect.applyElement (DivOuter)
// oSelect.attachEvent("",al)
var ShowInput = window.document.createElement ("input")
ShowInput.id="popupDDT_Input_" + oSelect.id
ShowInput.type="button"
ShowInput.style.textAlign="left"
ShowInput.style.backgroundColor=popupDDT_ComboBGColor
if (oSelect.selectedIndex!=-1) ShowInput.value= oSelect [oSelect.selectedIndex ].innerText;
ShowInput.className=oSelect.className
ShowInput.style.width=oSelect.clientWidth
ShowInput.style.height=oSelect.clientHeight
ShowInput.style.fontSize=popupDDT_FontSize
ShowInput.style.fontFamily=popupDDT_FontFamily
ShowInput.attachEvent ('onclick',popupDDT_unfold )
ShowInput.attachEvent ('onfocus',popupDDT_unfold )
oSelect.style.display="none"
DivOuter.appendChild (ShowInput);
ShowInput.readonly=true
oSelect.attachEvent("onchange",popupDDT_DataChange)
oSelect.attachEvent("onafterupdate",popupDDT_DataChange)
}
}
function popupDDT_DataChange()
{
var valueIpt=event.srcElement
var showIpt=valueIpt.parentNode.childNodes[1] ;
if (valueIpt.selectedIndex!=-1) showIpt.value=valueIpt[valueIpt.selectedIndex ].innerText;
}
/**//**//**//*
<!--useage: append these code at the end of <body> -->
<script src="ddtext.js" type ="text/javascript" language=javascript ></s \cript>
<script>
popupDDT_ComboBGColor="blue" //some parm modify
window.setTimeout ( "popupDDT_Init(theChangingSelectCombo);",100)
</script>
*/
Code
// JScript File
//const part
var popupDDT_ComboBGColor="white"; //"Transparent" is recommanded The control bg color
var popupDDT_DefaultBGColor="white"; //Drop down menu default bg color
var popupDDT_DefaultFTColor="black"; //Drop down menu default font color
var popupDDT_ChangedBGColor="black"; //Drop down menu msover bg color
var popupDDT_ChangedFTColor="white"; //Drop down menu msover font color
var popupDDT_MaxWidth=6000 //max width without scroll
var popupDDT_MaxHeight=800 //max Height without scroll
var popupDDT_FontFamily=" Verdana, Arial;" //DropDown Menu Fonts family
var popupDDT_FontSize=" 8.25pt" // DropDown Menu Fonts size
var popupDDT_Height=17 //DropDown Menu line height
var DivTest = window.document.createElement ("div")
DivTest.id="popupDDT_temptestfield"
DivTest.style.width=DivTest.style.height=0
DivTest.style.overflow="hidden"
document.body.appendChild (DivTest)
var oPopup = window.createPopup();
var oPopupBody = oPopup.document.body;
function popupDDT_fillback(text,textid,value,valueid)
{
document.getElementById (textid).value =text
document.getElementById (valueid).value =value //change the value doesn't change the selection
var TargetSel =document.getElementById (valueid)
for (i=0 ;i<TargetSel.all.length;i++) //find the one would be selected
{
var sText =TargetSel[i].innerText
var sValue =TargetSel[i].Value
if (sValue==value)
{
TargetSel[i].Selected=true; //select!
break;
}
}
oPopup.hide()
}
function popupDDT_unfold()
{
var showIpt=event.srcElement
var valueIpt=showIpt.parentNode.firstChild ;
var strrslt = new String( )
var y = showIpt.clientHeight ;
var x =0;
var textid= showIpt.id
var valueid= valueIpt.id
for (i=0 ;i<valueIpt.all.length;i++)
{
var sText =valueIpt[i].innerText
var sValue =valueIpt[i].value
strrslt= strrslt + "<div style='text-align:left ;font-size:"+popupDDT_FontSize +";font-family:"+ popupDDT_FontFamily +";100%;height:"+ popupDDT_Height +"px;border-0 ;background-Color:"+popupDDT_DefaultBGColor+"' onmouseout=\"this.style.backgroundColor='" + popupDDT_DefaultBGColor +"';this.style.color ='" + popupDDT_DefaultFTColor +"'; \" onmouseover=\"this.style.backgroundColor='" + popupDDT_ChangedBGColor +"';this.style.color ='" + popupDDT_ChangedFTColor +"'; \" onclick=\"parent.popupDDT_fillback ('"+sText+"','"+ textid +"','"+ sValue +"' ,'"+ valueid +"' )\">"+ sText +"</div>"
// strrslt= strrslt + "<input type='button' style='text-align:left ;font-size:"+popupDDT_FontSize +";font-family:"+ popupDDT_FontFamily +";100%;height:17px;border-0 ;background-Color:"+popupDDT_DefaultBGColor+"' onmouseout=\"this.style.backgroundColor='" + popupDDT_DefaultBGColor +"';this.style.color ='" + popupDDT_DefaultFTColor +"'; \" onmouseover=\"this.style.backgroundColor='" + popupDDT_ChangedBGColor +"';this.style.color ='" + popupDDT_ChangedFTColor +"'; \" onclick=\"parent.popupDDT_fillback ('"+sText+"','"+ textid +"','"+ sValue +"' ,'"+ valueid +"' )\" value=\""+ sText +"\"/><br />"
}
popupDDT_temptestfield.innerHTML = "<select ID='popupDDT_testselect' name='testselect' >" + valueIpt.innerHTML + "</select>"
var testselect =document.getElementById ("popupDDT_testselect")
testselect.style.fontSize =popupDDT_FontSize
testselect.style.fontFamily =popupDDT_FontFamily
var Wid = testselect.clientWidth -popupDDT_Height
var Hei =valueIpt.all.length * popupDDT_Height + 2
if (Wid > popupDDT_MaxWidth ) {Wid=popupDDT_MaxWidth}
if (Wid < showIpt.clientWidth +1 ) {Wid=showIpt.clientWidth +1}
if (Hei > popupDDT_MaxHeight ) {Hei=popupDDT_MaxHeight}
oPopupBody.noWrap=true
oPopupBody.innerHTML = " <div id='testfield' style='cursor:default;border-style :solid ;border-width :1;overflow:auto;100%;Height:100%'>" + strrslt + "</div>"
oPopup.show(x, y,Wid,Hei ,showIpt );
}
function popupDDT_Init(oSelect)
{
if ( "popupDDT_Span_" + oSelect.id !=oSelect.parentNode.id)
{
var DivOuter = window.document.createElement ("span")
DivOuter.id= "popupDDT_Span_" + oSelect.id
oSelect.applyElement (DivOuter)
// oSelect.attachEvent("",al)
var ShowInput = window.document.createElement ("input")
ShowInput.id="popupDDT_Input_" + oSelect.id
ShowInput.type="button"
ShowInput.style.textAlign="left"
ShowInput.style.backgroundColor=popupDDT_ComboBGColor
if (oSelect.selectedIndex!=-1) ShowInput.value= oSelect [oSelect.selectedIndex ].innerText;
ShowInput.className=oSelect.className
ShowInput.style.width=oSelect.clientWidth
ShowInput.style.height=oSelect.clientHeight
ShowInput.style.fontSize=popupDDT_FontSize
ShowInput.style.fontFamily=popupDDT_FontFamily
ShowInput.attachEvent ('onclick',popupDDT_unfold )
ShowInput.attachEvent ('onfocus',popupDDT_unfold )
oSelect.style.display="none"
DivOuter.appendChild (ShowInput);
ShowInput.readonly=true
oSelect.attachEvent("onchange",popupDDT_DataChange)
oSelect.attachEvent("onafterupdate",popupDDT_DataChange)
}
}
function popupDDT_DataChange()
{
var valueIpt=event.srcElement
var showIpt=valueIpt.parentNode.childNodes[1] ;
if (valueIpt.selectedIndex!=-1) showIpt.value=valueIpt[valueIpt.selectedIndex ].innerText;
}
/**//**//**//*
<!--useage: append these code at the end of <body> -->
<script src="ddtext.js" type ="text/javascript" language=javascript ></s \cript>
<script>
popupDDT_ComboBGColor="blue" //some parm modify
window.setTimeout ( "popupDDT_Init(theChangingSelectCombo);",100)
</script>
*/