Question

如果我点击能够查看完整选项值的省略号

，我想在下拉列表选项中添加省略号

例如，下拉列表看起来像这样

<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>

我期待输出如下

一个 - 长期选择.... 两个 - 很长的选择......

单击省略号时可以看到完整的选项值一个 - 需要用省略号来删除长文本

请查看我到目前为止所做的代码

<!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>

请帮助我获得上述预期结果

Answer 1

这是我解决您问题的方法。

它是一个解决方法，目标是椭圆选择值并在显示选项时显示孔文本。因此用户可以读取选项值。

$(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>

Answer 2

这是用于设置标题显示选项文本

的代码

$(function(){
              $("select option").attr( "title", "" );
              $("select option").each(function(i){
                this.title = this.text;

              })
            });
            $("select").tooltip({
                left:25
            });

Answer 3

在这里，您可能无法找到跨浏览器兼容的解决方案。由于select选项元素不能像往常一样。所以如果你能用语法做到这一点就会安全。

使用省略号设置下拉列表选项

3 个答案: