jquery下拉菜单修改所选文本，但在后续单击时显示先前所选文本的原始值

jquery dropdown modify selected text but display the original value of the previously selected text on a subsequent click

本文关键字：文本 显示 单击 原始 修改 下拉菜单 jquery      更新时间：2023-09-26

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

用户从列表中选择一个项目后，如果选择了"白色（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));
 });

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

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

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

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

请帮忙。

谢谢。。Nam

您可以使用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/

我会做一些类似的事情

<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>
相关文章：