Автовыбор значения выпадающего

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."\">".$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 ....

Имя виртуальной машины:

 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

Теперь я хочу, чтобы кто-нибудь выбрал любое значение параметра, как показано нижеНапример, выше моего раскрывающегося списка автоматический размер

: когда пользователь выбирает 172.125.4.169, то его размер соответствует размеру раскрывающегося списка, или когда пользователь выбирает "Microsoft Windows Server 2003 Enterprise x64 Edition 5.2.3790 xen - 121 - centos 5.4 - ip 101", он также подходит для раскрывающегося списка.

Прямо сейчас, если имя виртуальной машины длинное, раскрывающееся поле для выбора виртуальной машины выходит за пределы диапазона ...

Answer 1

Боюсь, что элементы управления формой, как известно, сложны для стиля. Даже если вы делаете что-то динамически с JavaScript, вам придется проделать большую работу, чтобы сделать это согласованным в разных браузерах. Если ваша пользовательская база достаточно узка, вы можете поиграть с такими вещами, как overflow или min-width, и посмотреть, что они делают в выбранном вами браузере. Некоторые из них имеют специфичные для браузера правила или имеют скрытые элементы внутри, которые имеют эффекты, отличные от их контейнеров.

Я знаю, что это мало помогает. К сожалению.

Answer 2

вам нужно использовать jquery для этого

 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;
            }

Все, что вам нужно сделать, это добавить класс SelectList к раскрывающемуся элементу (ам).

<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>

Answer 3

используйте это

<select id="cbvms" name="cbvms" class="SelectList" style="width:120px;">