Adjust width of DropDown list dynamically using JavaScript

 Introduction: Hello Guys, “Welcome back” Today, i am here with another one new great article. In this article I explained that how to adjust width of SELECT (DropDown) dynamically using JavaScript.

Join our Channel  on Whtsapp and Telagram for All Updates                                          

Code for  HTML Page

On the HTML I place a control named  SELECT (DropDown) with the id named dd_list_city with some options. On the onmouseover event of  the SELECT (DropDown)  I assigned JavaScript function named set_width().

<select id="dd_list_city" onmouseover="set_width(this)" style="width: 75px;">

    <option value="1">Amritsar</option>

    <option value="2">Batala</option>

    <option value="3">Chandigarh</option>

</select>

Adjusting width of SELECT (DropDown) using JavaScript

When you will hover the mouse on SELECT (DropDown), the set_width() JavaScript function will be called automatically. Inside this JavaScript set_width()  function, a loop will be executed over the options of SELECT (DropDown) element and the maximum Text length is determined. Finally, the width is set to the SELECT (DropDown) element.

<script type="text/javascript">

    function set_width(dd_list_city) {

        var maxWidth = 0;

        for (var i = 0; i < dd_list_city.length; i++) {

            if (dd_list_city.options[i].text.length > maxWidth) {

                maxWidth = dd_list_city.options[i].text.length;

            }

        }

       dd_list_city.style.width = maxWidth * 7 + "px";

    }

</script>

Conclusion: In above code, I explained about the implementation, how to adjust width of SELECT (DropDown) dynamically using JavaScript. Bye bye and take care of you all Developers. We will come back shortly with the new article. 

Regards

Programming Hub