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的顶部。

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

更改选择时，也可以在克隆中更改它。

＆＃13;

$(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;
  });
});

＆＃13;

#clone, #names {
  width: 90px;
}

#clone {
  position: absolute;
  z-index: 1;
}

#names {
  position: relative;
}

div:hover #names {
  z-index: 1;
}

＆＃13;

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

＆＃13;

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

1 个答案: