javascript 使用省略号设置下拉列表选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26625942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
set dropdown list option with ellipses
提问by venkat
I want to add ellipsis in the dropdown list options if I click the ellipsis able to see the full option values
如果单击省略号可以看到完整的选项值，我想在下拉列表选项中添加省略号
for example, dropdown list looking like this
例如，下拉列表看起来像这样
<select id ="id">
<option>One - A long text need to be cut off with ellipsis</option>
<option>Two - A long text need to be cut off with ellipsis</option>
</select>
I am expecting the output like as follows
我期待输出如下
One - A long option.... Two - A long option....
一 - 长选项.... 二 - 长选项....
when clicking the ellipses able to see the full option values like One - A long text need to be cut off with ellipsis
单击省略号时可以看到完整的选项值，例如 One - A long text need to be cut off with ellipsis
Please see the code which I done so far
请查看我到目前为止所做的代码
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
select {
width:200px;
}
</style>
<script>
$(document).ready(function() {
var maxLength = 20;
$('#example > option').text(function(i, text) {
if (text.length > maxLength) {
return text.substr(0, maxLength) + '...';
}
});
});
</script>
</head>
<body>
<select name="example" id="example">
<option value="">John Smith,1019 Your Company PO Box 7169 Poole BH15 9EL</option>
<option value="">91 Western Road,Brighton PO Box 7169 East Sussex England BN1 2NWL</option>
<option value="">John Smith,1019 Your Company PO Box 7169 Poole BH15 9EL</option>
</select>
</body>
</html>
Please help me to get the expected result as above
请帮我得到上面的预期结果
回答by Steven Web
Here is my solution for you problem.
这是我为您解决的问题的解决方案。
Its a workaround with the target to ellipse the select value and show the hole text when the options are shown. So the user can read the option values.
它是一种解决方法，目标是在显示选项时省略选择值并显示孔文本。因此用户可以读取选项值。
$(document).ready(function () {
$('div.viewport').text($('#example')[0].textContent);
$('#example').change(function () {
$('div.viewport').text($("option:selected", this).text());
});
}); select, .container {
width: 100px;
z-index: 2;
position: relative;
}
select {
color: transparent;
background: none;
}
.container {
position: relative;
}
.viewport {
position: absolute;
width: 80%;
height: 100%;
z-index: 1;
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
font-size: 14px;
padding: 3px;
}
option {
color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="viewport"></div>
<select name="example" id="example">
<option value="">This is some longggggggggggggggggggggggggggggggg text</option>
<option value="">Short Text</option>
<option value="">This is some really,really long text text and text</option>
</select>
</div>回答by Sarah
This is code for setting title display Option text
这是设置标题显示选项文本的代码
$(function(){
$("select option").attr( "title", "" );
$("select option").each(function(i){
this.title = this.text;
})
});
$("select").tooltip({
left:25
});
回答by Nishan Senevirathna
In here, you may not be able to find cross browser compatible solution. Since select option element cannot be style as usual. So if you can do this grammatically it will be safe.
在这里，您可能找不到跨浏览器兼容的解决方案。由于选择选项元素不能像往常一样样式。因此，如果您可以在语法上做到这一点，那将是安全的。
