How to resize the width of a select box at run time ?

Hi,

    How can i control the width of a dropdown (Select box) at run time. I want to increase/decrese width of a select box from a javascript function. When i try to get hold of the style of the element and try to set  the width its giving an error that the attribute is ready only. Any solutions ??

thanks,
Hyder
hyderAsked:
Who is Participating?
 
LindzKConnect With a Mentor Commented:
Below is a javascript example to change the width of any object ( in this case a select box )  and some html for you to test it

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title></title>
 
  <script language="javascript">
    // will resize a given object
      // variables
      // width = new width
      // id    = id of object
    function ReSize(width,id)
      {
        var selobj = document.getElementById(id);
        selobj.style.width = width;
      }
  </script>
 
</head>
<body>

<select id="SelectBox" name="SelectBox">
  <option value="aaa">aaa</option>
  <option selected value="bbb">bbb</option>
</select>

<input type="text" id="txtWidth" name="txtWidth" value="100px">
<input type="button" id="btnChangeSize" value="Change Size" onClick="ReSize(document.getElementById('txtWidth').value,'SelectBox')">

</body>
</html>
0
 
Ayesha_KConnect With a Mentor Commented:
Hi,

Run the following code amd you'll get the idea how to change the width on runtime

<html>

      <head>
      </head>
      <body>
            <form method=post name=FR>
            Names: <select name="FRNames" size=1 style="Width:200px;"

onchange="this.style.width='300px'">
                  <option value="A">A Value</option>
                  <option value="B">B Value</option>
                  <option value="C">C Value</option>
                  <option value="D">D Value</option>
                  <option value="E">E Value</option>
                  <option value="F">F Value</option>
                  </select>
            </form>
      </body>
</html>

Regards
0
 
_aaron_Commented:
@hyder
Is this because ur trying to set several elements on the page to the width of the largest element? (ie make all the select elements the same width? ) If so, I will post a quick script to do this onload (ie page init)....
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.