jquery dropdown 修改选定的文本，但在后续单击时显示先前选定文本的原始值答案

【问题标题】：jquery dropdown modify selected text but display the original value of the previously selected text on a subsequent clickjquery dropdown 修改选定的文本，但在后续单击时显示先前选定文本的原始值
【发布时间】：2013-11-23 11:38:21
【问题描述】：

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

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

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

我写的更改如下：

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

除了如果用户改变主意并再次单击以选择不同的项目或再次查看列表，上述代码有效，之前选择的项目仍显示为修改后的文本。例如，如果用户选择“白色（4.72 美元）”，则显示将正确更改为“白色”，但如果用户改变主意并再次单击 dropdwon 以决定他/她想要选择哪些，用户会看到以下列表：

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

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

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

请帮忙。

谢谢..南

【问题讨论】：

标签： javascript jquery asp.net

【解决方案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/

【讨论】：

【解决方案2】：

我会做这样的事情

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

<script type="text/javascript">
        $(function () {
            $('#ddlID').change(function () {
                $(this).find('option').each(function () {
                    var obj = $(this);
                    if (obj.is(':selected'))
                    {
                        obj.text(obj.attr('data-text'))
                    } else {
                        obj.text(obj.attr('data-value'))
                    }
                });
            });
        });
    </script>

【讨论】：