如何修改选定的选项文本&在下一个选项之后恢复文本

How to Modify selected option text & Restore Back text after next option

本文关键字：文本 选项 下一个 恢复 之后 何修改 修改      更新时间：2023-09-26

我想使用jQuery修改动态生成的下拉列表的文本内容。下面是我的例子:

下拉文本如下:

<select id="s1">
  <option data-name="volvo" value="1">1:Volvo</option>
  <option data-name="saab" value="2">2:Saab</option>
  <option data-name="mercedes"  value="3">3:Mercedes</option>
  <option data-name="audi"  value="4">4:Audi</option>
  <option data-name="BMW" value="11">11:BMW</option>
</select>
jQuery: 

var previous;
$('#s1').focus(function () {
  // Store the current value on focus, before it changes
  previous = this.value;        
}).change(function() {    
  //Modify the SelectedOption Display only Number Value 
  $('#s1').find(':selected').text($('#s1').find(':selected').val());
  //Restore the Previous Option : Format 'Number Value : data-name'
  alert($("#s1 option[value='"+previous+"']").val());
  alert($("#s1 option[value='"+previous+"']").attr('data-name'));
  $("#s1 option[value='"+previous+"']").text($("#s1 option[value='"+previous+"']").val() +' '+ $("#s1 option[value='"+previous+"']").attr('data-name'));        
});

我还使用了以下属性:

  • value:存储该车的编号值
  • data-name:存储该车的名称
这就是我想要的:当任何用户选择任何选项时，所选选项文本将被修改并删除Name部分:例如:选择1:Volvo变成1 only。但是，如果用户选择另一个选项，则先前的选项文本将恢复到先前的格式，例如:1变为1:沃尔沃再次。这就是为什么我使用给定的属性来恢复格式。我写了一个代码，工作良好，如果我使用alert，但我想做到这一点，而不使用alert，然后它不工作。 下面是我的代码:jsfiddle请帮助。

您已经设置了data-name和value属性，因此您可以轻松地遍历option属性并使用这些属性来更新文本:

$('#s1').change(function() {    
  $(this).find('option').each(function(){
    $(this).text(
      $(this).attr('value')+( $(this).is(':selected') ? '' : ':'+$(this).attr('data-name'))
    );
  });
});


$('#s1').change(function() {    
  $(this).find('option').each(function(){
    $(this).text(
      $(this).attr('value')+( $(this).is(':selected') ? '' : ':'+$(this).attr('data-name'))
    );
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="s1">
  <option data-name="volvo" value="1">1:Volvo</option>
  <option data-name="saab" value="2">2:Saab</option>
  <option data-name="mercedes"  value="3">3:Mercedes</option>
  <option data-name="audi"  value="4">4:Audi</option>
  <option data-name="BMW" value="11">11:BMW</option>
</select>

编辑
(评论)我想说的是，对于正常的使用，上面的代码不会对用户体验产生影响。在数学(?)意义上，它会更慢——执行时间上的差异可以忽略，因为DOM在$.each()循环中被修改(每个<option>都被更新)，这不是最好的主意。但是没有什么usar能注意到的。

对于OP的例子，其中只涉及5个选项，更新所有选项与只更新2个是有争议的，在速度上不会有任何区别。如果有数百个选项，那么(说到用户体验)作为用户，我不会很高兴有这么多的选项要通过，搜索我需要的那个。所以主要问题就在那里。

但是，如果对上述脚本速度有任何担忧，还有另一种(更好的?)方法，不使用全局标志和循环。它创建一个临时的data-last属性，用于标识之前选择的<option>，并且一次只修改两个选项: 
$('#s1').change(function() {    
  $(this).find('option:selected').attr('data-last','Yes').text(this.value)
  .siblings('[data-last]').removeAttr('data-last').text(function(){
    return this.value+':'+$(this).attr('data-name');
  });
});


$('#s1').change(function() {    
  $(this).find('option:selected').attr('data-last','Yes').text(this.value)
    .siblings('[data-last]').removeAttr('data-last').text(function(){
    return this.value+':'+$(this).attr('data-name');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="s1">
  <option data-name="volvo" value="1">1:Volvo</option>
  <option data-name="saab" value="2">2:Saab</option>
  <option data-name="mercedes"  value="3">3:Mercedes</option>
  <option data-name="audi"  value="4">4:Audi</option>
  <option data-name="BMW" value="11">11:BMW</option>
</select>

这两种方法之间的速度比较(200个选项):

JSFiddle

相关文章：