设置带有省略号的下拉列表选项 [英] set dropdown list option with ellipses
本文介绍了设置带有省略号的下拉列表选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如果我点击省略号查看完整选项值
，我想在下拉列表选项中添加省略号。例如，下拉列表看起来像这样
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>
我期望输出如下
一个 - 长选项....
两个 - 长选项....
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
请看我到目前为止做的代码
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
推荐答案
这里是我的解决方案为你的问题。
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>
这篇关于设置带有省略号的下拉列表选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
