如何使用 jquery 仅截断下拉列表的选定文本

Question

我有一个下拉菜单

<div>
<select id="ddlTruncate">
    <option selected="selected">Select </option>       
    <option value="1">tetetetetetetet </option>
    <option value="2">tetetetetetetetetetete </option>
    <option value="3">tetetetetettetete </option>        
</select>
</div>

我只想截断选定的值，如果该值在以前的值中发生变化，则应显示原始值

 $('#ddlTruncate').change(function () {
     var textval = $('#ddlTruncate :selected').text(); 
     var ddlval= $(this).val();   
        if(textval.length > 5) {    
            $('#ddlTruncate :selected').text(textval.substr(0,4)+'…');
        }
 });

目前当我选择任何其他选项时，之前的值显示为折射到原始值。请检查 link http://jsfiddle.net/hurera1111/6x039o7w/

Answer 1

已更新 fiddle 在这里为您服务。

将 option 的实际文本存储在 data-text 中，然后在更改时更改所有 options 但不更改 :selected 的文本。

Answer 2

让我解释一下 .. 1- 在 substr 之前将实际文本存储在名为 data-text 的属性中 ... 2- 遍历所有选项文本但未选择而不是 first-child 使用 :not(":selected,:first-child") 选择器... 3- 如果另一个选项文本的任何文本与所选文本匹配，则将先前的文本更改为来自 data-text

的存储数据

$('#ddlTruncate').on('change',function () {
     var textval = $('#ddlTruncate :selected').text(); 
     var ddlval= $(this).val();
        if(textval.length > 5) {
            $('#ddlTruncate :selected').attr('data-text',textval);
            $('#ddlTruncate :selected').text(textval.substr(0,4)+'…');
            var newtext = $('#ddlTruncate :selected').text(); 
            $('#ddlTruncate option:not(":selected,:first-child")').each(function(){
                if($(this).text() == newtext){
                    $(this).text($(this).attr('data-text'));
                }
            });
        }
 });

DEMO

如何使用 jquery 仅截断下拉列表的选定文本

How to truncate only selected text of dropdown using jquery

jquery

dropdownbox