Question

我是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）”，则显示将正确地更改为“白色”，但如果用户改变他/她的想法并再次点击dropdwon以决定他/她想要选择哪些，则用户看到以下列表：

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

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

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

请帮忙。

Thanks..Nam

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/

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

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

2 个答案: