mohan.n
Posts: 1
Joined: Thu May 10, 2007 6:28 am

Dyanmically set the width of Select box

Hi friends,
i have a code to set the width of select box dyanamically based on the option vlaue in the select box. The following code is working well in mozilla . But the same is not working in IE 6.
Can u guys suggest some solution for this?

Thanks,
Maggi.

<html>
<head>
</head>
<body>

<form name="TPFTransfer" id="TPFTransfer">
<select name="sel1" size="1" id="sel1" style="position:absolute;">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<br>
<select name="sel3" size="1" id="sel3">
<option value="12345">12345</option>
<option value="123451234512345123451234512345">123451234512345123451234512345123451234512345123451234512345123451234512345123451234512345</option>
<option value="1234512345123451234512345">1234512345123451234512345</option>
</select>

<br>
<select name="sel2" size="1" id="sel2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
</form>

<SCRIPT>
var widthDropDown = 0;
for(var i=0; i < document.forms[0].elements.length; i++) {
if(document.forms[0].elements[i].type == "select-one") {
var fieldObj = document.forms[0].elements[i];
//w_style = document.defaultView.getComputedStyle(fieldObj, null).getPropertyValue("width");
//w_style = document.defaultView.currentStyle(fieldObj, null).getPropertyValue("width");
if( window.getComputedStyle ) {
w_style = window.getComputedStyle(fieldObj,'').width;
alert("inside getcomp");
} else if( fieldObj.currentStyle ) {
//w_style = offsetWidth + 'px';
alert("inside currentStyle");
w_style = fieldObj.currentStyle.width;
}
alert(w_style);
w_style1 = parseInt(w_style.substring(0,w_style.length-2));
if(w_style1 > widthDropDown ){
widthDropDown = w_style1;
//alert(widthDropDown);
}
}

}
for(var i=0; i < document.forms[0].elements.length; i++) {
var fieldObj = document.forms[0].elements[i];
if(document.forms[0].elements[i].type == "select-one") {
fieldObj.style.width = widthDropDown;

}

}

</SCRIPT>

</body>
</html>

Return to “Highslide JS Usage”