javascript - jquery 下拉菜单修改选定的文本，但在随后的单击中显示先前选定文本的原始值

Question

我的 ASP.NET MVC4 应用程序在 Visual Studio 2012 中，我有一个下拉列表如下:

<select name="ddlID" id="ddlID">
  <option value="1">None</option>
  <option value="2">White ($4.72)</option>
  <option value="3">Black ($5.90)</option>
  <option value="4">Blue ($5.90)</option>
</select>

用户从列表中选择一个项目后，我需要将所选文本的显示更改为“白色”(如果选择“白色($4.72)”)，如果选择“黑色($5.90)”则更改为“黑色”等.

我什至写了如下更改:

$('#ddlID').change(function () {
   var selText = $('#ddlID option:selected').text();
   var i = selText.indexOf(" ");
   $('#ddlID option:selected').text(selText.substring(0, i));
 });

以上代码有效，但如果用户改变主意并再次单击以选择不同的项目或再次查看列表，先前选择的项目仍显示为修改后的文本。例如，如果用户选择“White ($4.72)”，显示将正确更改为“White”，但如果用户改变主意并再次单击 dropdwon 来决定他/她想要选择哪些，用户会看到以下列表:

None
White
Black ($5.90)
Blue ($5.90)

一旦用户再次点击，我需要将原始列表显示为:

None
White ($4.72)
Black ($5.90)
Blue ($5.90)

请帮忙。

谢谢..南

Answer 1

您可以使用 jQuery 的 data 方法来分配或读取有关元素的一些信息。例如:

 $('#elem').data('some-info', 15);
 console.log($('#elem').data('some-info')); // 15

在您的情况下，您可以遍历页面加载中的每个选项并在数据属性中设置其原始文本。然后，在下拉更改事件中，您可以将此数据重新加载到每个选项以在更改为新文本之前恢复原始文本。

// sets the original text in a data property for each option
$('#ddlID option').each(function() {
    $(this).data('original-text', $(this).text()); 
});

$('#ddlID').change(function () {
    // put back the original text to each option
    $(this).find('option').each(function() {
        $(this).text($(this).data('original-text')); 
    });

    var selText = $('#ddlID option:selected').text();
    var i = selText.indexOf(" ");
    $('#ddlID option:selected').text(selText.substring(0, i));
});

实例:http://jsfiddle.net/cSnnh/