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属性，因此您可以轻松遍历option并使用这些属性更新文字：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

对于OP示例，其中只涉及5个选项，可以说更新所有选项VS仅更新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');
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

这两种方法之间的速度比较（200个选项）：

JSFiddle

如何修改选定的选项文本＆amp;下一个选项后恢复后退文本

1 个答案: