截断下拉项目

我有一个网站的这个领域，我正在与几个相互关联的下拉列表工作。在第三个列表中，我试图截断所选的项目，并在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>

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

所以我想我需要知道的是：
1）如何去得到我“如果”语句正常工作，并
2）如何将您可以选择在此之后的效果被选中？所以，当你看到选项时，它们是全文，但选定的文本会被省略并附上省略号？

任何帮助非常感谢！

来源

2015-01-20 Sarwic

你让所有的选项，而不仅仅是一个

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

来源

2015-01-20 19:54:01

谢谢！我在底部编辑了我的问题，使其更具体。我实际上只希望对选定的选项执行此操作，而不是下拉列表中的所有选项。所以有人会选择第一个选项，当它们显示为选中时，它会被截断，等等。 – Sarwic 2015-01-20 20:36:04

截断下拉项目

回答

相关问题