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"时，它也适合下拉列表。

现在，如果VM名称很长，则选择VM的下拉字段超出范围....

Answer 1

使用此

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

Answer 2

我担心表格控件很难打造。即使您使用JavaScript动态执行某些操作，也必须投入大量精力才能使其在浏览器中保持一致。如果您的用户群足够窄，您可以使用overflow或min-width属性等内容，并查看他们在您选择的浏览器上执行的操作。有些具有特定于浏览器的规则，或者内部具有隐藏元素，这些元素具有与其容器不同的效果。

我知道这没多大帮助。遗憾。

Answer 3

你需要在这个

中使用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>

自动选择下拉值

3 个答案: