我在 select
元素中有一个 option
状态列表。
<select>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
</select>
我需要浏览器只显示州的缩写(目前存储在 value
属性中),但打开的下拉菜单仍应显示州的全名。因此,用户将在下拉菜单中看到并选择“Arizona”,然后关闭的下拉菜单将显示“AZ”。
this question的第一个答案很接近,但它用 value
的值替换了 option
文本,所以它对我不起作用。
我想为此使用 JavaScript/JQuery,但感谢任何可以仅使用 HTML 和 CSS 完成此操作的向导。
关于如何实现这一点有什么想法吗?
最佳答案
如果您仍在寻找答案,我会按照以下方式进行解答。
首先,我没有看到很多用例这样做。只是为了缩写一个用户可以轻松阅读的单词似乎需要付出很多努力。不过,它就在这里。
因为没有真正的方法来检查最后选择的,除非我们将它存储在一个变量中,然后迭代列表以在用户选择输入时取回名称,这需要大量的工作。但是,我们可以将数据存储在数组内的选择中,然后将数据持久化到我们想要的任何地方。在这种情况下,我不建议直接使用 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>
关于javascript - HTML select - 在 HTML 中显示值属性但保留选项文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26822596/