在选择选项中修复下拉菜单的宽度 [英] Fix width of drop down menu in select option

问题描述

当我打开我的下拉列表时，列表的宽度大于下拉框。
列表宽度应与下拉框相同。

解决方案

您可以使用以下内容：

  select，option {width：__; } 
  

请记住，这可能无法在Google Chrome上运行。如果你想要一个跨浏览器的解决方案，你可能不得不使用PHP来剪辑带有SubStr的String。你也可以使用jQuery来设置选项文本的长度。

  jQuery（'＃dropdown option' {var optionText = this.text; console.log（optionText）; var newOption = optionText.substring（0,19）; console.log（newOption）; jQuery（this）.text（newOption +'..'）;} ）;  

  select，option {width：150px;}  

 < script src =https：//ajax.googleapis的.com / AJAX /库/ jquery的/ 1.7.2 / jquery.min.js>< /脚本><表> < TR> < TD> < select id =dropdownstyle =width：150px;> < option value =test> 123123123123123123123123123123< / option> < option value =test2> 123123123123123123123123123123< / option> < option value =test3> 123123123123123123123123123123< / option> < /选择> < / TD> < TD> < input type =text> < / TD> < / tr>< / table>  

JsFiddle： / p>

http://jsfiddle.net/78h5hk3r/5/

您必须设置

的子字符串值

  var newOption = optionText.substring（0,19）; 
  

自己尽管。

When I open my dropdown list, the width of list is greater than drop down box. List width should same as drop down box.

解决方案

You can use the following:

select, option { width: __; }

Keep in mind this may not work on Google Chrome. If you want a cross-browser solution you will probably have to use PHP to clip the String with SubStr. You can probably also use jQuery to set the length of the option text.

    jQuery('#dropdown option').each(function() {
        var optionText = this.text;
        console.log(optionText);
        var newOption = optionText.substring(0,19);
        console.log(newOption);
        jQuery(this).text(newOption + '..');
    });

select, option {
    width:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <select id="dropdown" style="width:150px;">
                <option value="test">123123123123123123123123123123</option>
                <option value="test2">123123123123123123123123123123</option>
                <option value="test3">123123123123123123123123123123</option>
            </select>
        </td>
        <td>
            <input type="text">
        </td>
    </tr>
</table>

JsFiddle:

http://jsfiddle.net/78h5hk3r/5/

You will have to set the substring values of

var newOption = optionText.substring(0,19);

By yourself though.

这篇关于在选择选项中修复下拉菜单的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！