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

我有一个下拉列表

<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>

当前，当选择任何其他选项时，上一个值将显示为“折射到原始值”。请检查此处为您更新的链接

---

将实际文本存储在

选项的
数据文本中，然后在更改时，更改所有
选项的文本，但不更改
：所选的一个。
让我解释一下。。1-将实际文本存储在名为“数据文本”的属性中，然后再使用substr。。。2-使用
：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'));
                }
            });
        }
 });

您需要在更改前后存储值。同意w/@ShaunakD-使用
数据
存储实际值，然后在提交或其他任何操作时，从
数据
属性中获取值
$('#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'));
                }
            });
        }
 });