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

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

Answer 1

此处为您更新了fiddle。

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

Answer 2

让我解释一下.. 1-将实际文本存储在名为data-text的属性中，然后将它包含在所有选项文本中，但不选择，而不是使用:not(":selected,:first-child")选择器选择第一个子项。 .. 3-如果另一个选项文本的任何文本与所选文本匹配，则将前一个文本更改为数据文本

中存储的数据

$('#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仅截断下拉列表的选定文本

2 个答案: