截斷下拉項目

我有一個網站的這個領域，我正在與幾個相互關聯的下拉列表工作。在第三個列表中，我試圖截斷所選的項目，並在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

截斷下拉項目

回答

相關問題