Question

我已经拥有了一个网站的这个区域我正在处理几个相互关联的下拉列表。在第3个列表中，我尝试截断选中的项目，并在其末尾用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");放在＆＃39;之外时，如果＆＃39;陈述我看到＆＃34; item＆＃34;打印4次到控制台。如果我替换p = p.substring（0，len）+＆＃34; ...＆＃34 ;;使用console.log（＆＃34; item＆＃34;）;它没有打印任何东西。

所以我想我需要知道的是：
1）如何获得我的＆＃39;如果＆＃39;声明工作正常，和 2）选择该选项后你会有这种效果吗？因此，当您看到选项时，他们是全文，但是所选文本会被截断并附加省略号？

非常感谢任何帮助！

Answer 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) + '...';
    }
});

截断下拉项目

1 个答案: