定义选择/选项元素的最大可见长度

Question

我想创建一个<select> 字段。默认情况下，该字段的长度由最长的<option> 定义。当我需要整个选择字段 100% 的父 div 时，是否可以定义可见选择选项的最大长度？

让我用代码告诉你：

<div class = "my-container">
  <select name="myselect" id="myselect">
    <option>abc</option>
    <option>xyz1</option>
    <option>really really long long long long long string</option>
  </select>
</div>

风格：

.my-container{
  width:200px;
}
#myselect{
  width: 100%;
}

现在我想让我的选择字段 100% 宽度，但是！我想在这个选择中显示，让我们说只有 20 个单词（或一些 px 值）的选项值，然后是“...”示例：

Verylong
Verylonglonglong... (original value: Verylonglonglong1234567789)

我尝试将溢出属性添加到#myselect，但它对我不起作用。

Answer 1

您的问题的 JQuery 解决方案：

var maxLength = 15;
$('#myselect > option').text(function(i, text) {
    if (text.length > maxLength) {
        return text.substr(0, maxLength) + '...';  
    }
});

.my-container{
  width:200px;
}
#myselect{
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class = "my-container">
  <select name="myselect" id="myselect">
    <option>abc</option>
    <option>xyz1</option>
    <option>really really long long long long long string</option>
  </select>
</div>