截断下拉项答案

【问题标题】：Truncating Dropdown Item截断下拉项
【发布时间】：2015-01-20 19:47:23
【问题描述】：

我正在处理一个网站的这个区域，其中包含几个相互关联的下拉列表。在第三个列表中，我试图截断选中的项目，并在其末尾用 jQuery 连接一个省略号。我已经尝试了几种解决方案，但我没有任何运气。谁能告诉我我在这里缺少什么？

这是我正在使用的：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>       
</head>
<body>
<div class="search-dtls">
    <h3>Select Book</h3>
    <div class="searh-field">
        <select class="select" id="cont" name="cont">
            <option>Book Language</option>
            <option value="1">English</option>
            <option value="5">Spanish</option>
        </select>
    </div>
    <div class="searh-field">
        <select class="select" id="cont2" name="cont">
            <option selected="selected">Year Published</option>
            <option value="2014">2014</option>
            <option value="2013">2013</option>
        </select>
    </div>
    <div class="searh-field">
        <select class="select" id="cont3" name="cont">
            <option selected="selected">Select Book</option>
            <option value="234">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </option>
            <option value="804">Fusce efficitur fermentum nibh ac congue nulla a urna at massa cursus cursus.</option>
            <option value="224">Lorem ut vulputate facilisis, est nibh ullamcorper turpis, a sodales dui nisi vel odio.</option>
        </select>
    </div>
    <input type="submit" id="search" value="Start Your search">
</div>
<script>

    var len = 30;
    var p = $('#cont3 option');

    p.each(function(){
        if(p.length > len) {
            console.log("item");
        }
    });

</script>
</body>

我觉得我很接近，但我的条件搞砸了。我知道我选择了正确的元素，因为当我将console.log("item"); 放在“if”语句之外时，我看到“item”打印了 4 次到控制台。如果我替换 p = p.substring(0, len) + "...";使用控制台.log("item");它不打印任何东西。

所以我想我需要知道的是：
1) 如何让我的“if”语句正常工作，以及
2）选择该选项后，您将如何获得这种效果？因此，当您看到选项时，它们是全文，但所选文本会被截断并附加省略号？

非常感谢任何帮助！

【问题讨论】：

标签： jquery concatenation truncate html.dropdownlistfor

【解决方案1】：

您将获得所有选项，而不仅仅是一个

var len = 30;
$('#cont3 option').each(function(index, value) {
     if(this.text.length > len) {
        this.text = this.text.substring(0, len) + '...';
    }
});

根据您在下面的问题 - 我认为无论如何都截断它们会更有益。下面的版本将更改 change 上的文本，但一旦不再突出显示（选择），就不会用旧文本替换它。尽管如此 -

改成change函数

 $('#cont3').change(function () {
     var text = $(this).text();
     if(text.length > len) {
        $(this).text() = text.substring(0, len) + '...';
    }
});

【讨论】：

谢谢！我在底部编辑了我的问题，使其更加具体。我实际上希望只对选定的选项而不是下拉列表中的所有选项执行此操作。所以有人选择了第一个选项，当它显示为选中时被截断，其他每个选项依此类推。