Question

i have an dropdown like this:

<select id="cbvms" name="cbvms" class="SelectList">
        <?php
        foreach($vm_array as $key => $value)
        {
            if(strcmp($vmguid,$key) == 0)
                echo "<option value=\"".$key."\" selected=\"".$value."\">".$value."</option>";
            else
                //echo "<option value=\"".$key."\">".$value."</option>";
                echo "<option value=\"".$key."\" title=\"".$value."\">".$value."</option>";
        }
        ?>
        </select>
    and in my database i have an option value like this ....

VM name:

 172.125.4.186
 172.125.4.101
 172.125.4.194
 172.125.4.126
 172.125.4.167
 172.125.4.102
 172.125.4.171
 172.125.4.118
 172.125.4.169
 Microsoft Windows Server 2003 Enterprise x64 Edition 5.2.3790 xen - 121 - centos 5.4 - ip 101
 salman
 saman
 172.125.4.198
 172.125.4.200
 172.125.4.189
 172.125.4.191

now i want when some one select any option value as shown as above my dropdown autosize

for example: when user select 172.125.4.169 then its fit on the size of dropdown, or when the user select "Microsoft Windows Server 2003 Enterprise x64 Edition 5.2.3790 xen - 121 - centos 5.4 - ip 101" then its also fit on the dropdown.

Right now if the VM name is long, the drop down field for Select VM goes out of range….

Answer 1

u need to use jquery for this

 if ($.browser.msie) $('select.SelectList')
                    .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
                    .bind('click', function() { $(this).toggleClass('clicked'); })
                    .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
                    .bind('blur', function() { $(this).removeClass('expand clicked'); });

CSS:

 select {
                width: 120px; /* Or whatever width you want. */
            }
            select.expand {
                width: auto;
            }

All you need to do is to add the class SelectList to the dropdown element(s) in question.

<select id="cbvms" name="cbvms" class="SelectList">
<?php
        foreach($vm_array as $key => $value)
        {
            if(strcmp($vmguid,$key) == 0)
                echo "<option value=\"".$key."\" selected>".$value."</option>";
            else
                echo "<option value=\"".$key."\" title=\"".$value."\">".$value."</option>";
        }
        ?>
        </select>