HTML選擇 - 在HTML中顯示值屬性，但保留選項文本

Question

我在元素中有option個狀態的列表。

<select> 
    <option value="AL">Alabama</option> 
    <option value="AK">Alaska</option> 
    <option value="AZ">Arizona</option> 
    <option value="AR">Arkansas</option> 
</select> 

我需要的瀏覽器顯示的狀態（這是當前存儲在value屬性），但打開的下拉菜單中應仍顯示狀態的全名，只是縮寫。因此，用戶將在下拉菜單中看到並選擇「亞利桑那」，然後關閉的下拉菜單將顯示「AZ」。

this question的第一個答案已接近，但它將option文本替換爲value的值，因此它對我無效。

我想爲此使用JavaScript/JQuery，但對任何只能使用HTML和CSS執行此操作的嚮導都很感謝。

有關如何實現此目的的任何想法？

Answer 1

如果你還在尋找答案，這裏是我該怎麼做。

首先，我沒有看到太多的用例這樣做。無論如何，用戶可以輕鬆讀取的單詞縮寫似乎很費力。雖然，在這裏。

因爲有檢查最後選擇的，除非我們將其存儲在一個變量，然後遍歷列表，當用戶選擇輸入帶回名字沒有真正的方法，它需要很多努力。雖然，我們可以將數據存儲在數組中的選擇內，然後將數據存儲在任何我們想要的地方。在這種情況下，我不建議直接從HTML元素中使用數據，但現在，您可以在下面的示例中看到，將數組中的狀態存儲在數組中會發揮作用。

以下的答案必須jQuery。

見JSFiddle，或運行代碼：

;(function() { 
 

 
    var states = []; 
 
    var customSelect = $('.js-select'); 
 
    var customSelectOptions = customSelect.children(); 
 

 
    // Get each state then push them to the array 
 
    // Initial state declaration 
 
    customSelectOptions.each(function() { 
 
     var state = $(this).text(); 
 
     states.push({ state: state }); 
 
     if ($(this).is(':selected')) { 
 
      $(this).text($(this).attr('value')); 
 
     } 
 
    }); 
 

 
    // On focus, always retain the full state name 
 
    customSelect.on('focus', function() { 
 

 
     customSelectOptions.each(function(index) { 
 
      $(this).text(states[index].state); 
 
     }); 
 

 
     // On change, append the value to the selected option 
 
     $(this).on('change', function() { 
 

 
      customSelectOptions.each(function(options) { 
 
       if ($(this).is(':selected')) { 
 
        $(this).text($(this).attr('value')); 
 
       } 
 
      }); 
 

 
      // Un-focus select on finish 
 
      $(this).blur(); 
 

 
     }); 
 

 
    }); 
 

 
}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="js-select"> 
 
    <option value="AL">Alabama</option> 
 
    <option value="AK">Alaska</option> 
 
    <option value="AZ">Arizona</option> 
 
    <option value="AR">Arkansas</option> 
 
</select>

Answer 2

JavaScript將被要求這樣做。我使用Chrome將this demo放在一起，因此select的寬度可能需要進行調整，以使其在所有瀏覽器中都很好看。

CSS

select { 
    width: 12px; 
    border: 0; 
    /* text-indent: -999em; */ /* or hide text so the width can be set higher */ 
} 

HTML

<span class="select-value"></span> 
<select> 
    <option value="AL">Alabama</option> 
    <option value="AK">Alaska</option> 
    <option value="AZ">Arizona</option> 
    <option value="AR">Arkansas</option> 
</select> 

腳本

$(function(){ 
    $('select').on('change', function(){ 
     $('.select-value').html(this.value); 
    }).change(); 
}); 

---

更新：爲了減輕使文字可點擊的關注，更多的代碼可以被添加，然後重新定位選擇（demo）

CSS

select { 
    width: 50px; 
    border: 0; 
    text-indent: -999em; 
} 
.select-value { 
    position: relative; 
    left: 30px; 
    z-index: 1; 
} 

腳本

$(function() { 
    $('select').on('change', function() { 
     $('.select-value').html(this.value); 
    }).change(); 

    $('.select-value').on('click', function() { 
     $('select').focus(); 
    }); 
}); 

Answer 3

肯定不能在HTML和CSS來實現.. JS在這裏是必需。

那麼你可以使用「change（）」jQuery函數來處理更改選項的操作。然後你可以通過'selected'屬性獲取selected選項值，並將其作爲選擇的選項文本，然後在select元素上使用「click（）」並將選項文本返回原始值。

這是棘手的遊戲，不乾淨。

其他選項將創建一些容器來存儲所選選項的值。在這種情況下，您將需要將此容器設置爲選擇按鈕，並在單擊時選擇元素將被單擊（此處爲更多javascript）。

在你的情況下，我會搜索一個漂亮而強大的選擇元素插件，這將盛大你的需求。

Answer 4

嗯，我沒有考慮使用blur和focus事件。如果使用jQuery是一個選項：

$('select').on('blur focus', function (e) { 
    $(this.options).text(function() { 
     return e.type === 'focus' 
       ? this.getAttribute('data-default-text') 
       : this.value; 
    }); 
}).children().attr('data-default-text', function() { 
    return this.textContent; 
}); //.end().on('change', function() { $(this).blur(); }).blur(); 

http://jsfiddle.net/0vre3cmg/