截断所选选项的选项文本，未选中时取消截断

Question

我编写了一个函数来截断文本长度超过 X 字符的选择选项。我只需要截断选定的选项，并在未选中时取消截断所有选项。

发生的情况是，即使未选中，它们也会在列表中永远缩短。另外，有没有更简洁的方式来编写整个代码块？

小提琴：

https://jsfiddle.net/kirkbross/pcb0a3Lg/9/

var namesList = ['johnathan', 'tim', 'greggory', 'ashton', 'elizabeth'];

$(function() {
    for (var i = 0; i < 5; i++) {
        var name = namesList[i];
        $('#names').append('<option>' + name + '</option>');
    }
    var selected_option = $('#names').find('option:selected').val();
    var truncated = truncate(selected_option);
    $('option:selected').text(truncated.new);

    $('#names').change(function(){
       var selected_option = $(this).find('option:selected').val();
       var truncated = truncate(selected_option);
        $('option:selected').text(truncated.new);
    });

});

function truncate(selected_option) {
    var nameLength = selected_option.length
    if (nameLength > 4) {
        selected_option = selected_option.substr(0, 4) + '...';
    }
    return {new: selected_option}
}

Answer 1

这里有一个想法：创建一个 select 元素的克隆，其中包含被截断的选项，绝对位于 select 的顶部。

悬停时，显示原始选择而不是克隆。

当你改变选择时，在克隆中也改变它。

$(function() {
  var namesList = ['johnathan', 'tim', 'greggory', 'ashton', 'elizabeth'];
    
  //append all at once:
  $('#names').append('<option>'+namesList.join('</option><option>')+'</option>');
    
  $('#names option').each(function() {
    var txt = $(this).text();
    if(txt.length > 4) txt= txt.substr(0,4)+'…';  //use an ellipsis instead of 3 dots
    $('#clone').append('<option>'+txt+'</option>');
  });

  $('#names').change(function() {
    $('#clone')[0].selectedIndex= this.selectedIndex;
  });
});

#clone, #names {
  width: 90px;
}

#clone {
  position: absolute;
  z-index: 1;
}

#names {
  position: relative;
}

div:hover #names {
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="clone"></select>
  <select id="names"></select>
</div>