jQuery下拉菜單修改選定的文本，但在隨后的單擊中顯示先前選定的文本的原始值

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）”，則顯示將正確更改為“白色”，但是如果用戶改變了主意並再次單擊下拉菜單來確定他/她想要選擇的那個，則用戶會看到以下列表：

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

在您的情況下，您可以遍歷頁面加載中的每個選項，並在data屬性中設置其原始文本。 然后，在下拉更改事件中，您可以將數據重新加載到每個選項中，以還原原始文本，然后再更改為新文本。

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