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

Question

我想使用 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: 存储那辆车的名称

这就是我想要的： 每当任何用户选择任何选项时，所选选项文本将被修改并删除该名称部分：例如：选择 1：沃尔沃仅变为 1。但是，如果用户选择另一个选项，则先前的选项文本将恢复为以前的格式例如：1 再次变为 1：沃尔沃。这就是为什么我使用给定的属性来恢复格式。 如果我使用alert，我已经编写了一个可以正常工作的代码。但是我想在不使用alert 的情况下这样做，然后它就不起作用了。

这是我的代码： jsfiddle 请帮忙。

Answer 1

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

$('#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>

---

编辑（评论）
我想说的是，在正常 的使用中，上面的代码不会影响用户体验。在 mathematics(?) 含义中它会变慢 - 执行时间的差异可以忽略不计，因为在 $.each() 循环内修改了 DOM（每个 <option> 都被更新），这不是最好的主意.但是没有任何东西可以引起用户的注意。

对于仅涉及 5 个选项的 OP 示例，可以说更新所有选项与仅更新 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