我一直在尝试为电话号码扩展名设置一个下拉列表,该列表将显示扩展名(仅 +xxx,例如 +44),而下拉列表将包含更具描述性的文本,例如“英国( +44)"代替。
我设法取得了一些进展,但是当下拉菜单重新打开并选择了一个项目时,我无法恢复文本。下拉菜单将显示正确的值,但选项列表仍将显示数字(但是,它在 firefox 中工作正常,但至少在 chrome/IE 中不工作)
如果能帮助我实现目标,我将不胜感激,最好仍然使用“标准”输入控件。
当前代码/jsFiddle:
var toggled = 1;
$(function(){
$("#ddMobileExtension option").each(function () {
// Set data item for all options
$(this).data("data-txt", $(this).text());
});
$("#ddMobileExtension").change(function () {
$("option", this).each(function () {
// Reset all options to their corresponding data items
$(this).text($(this).data("data-txt"));
});
// Set the selected option to be +XX
// (Provided it's not the first item)
$(this).find("option:selected").text(
$(this).find("option:selected").attr("value") != "-1" ? "+" + $(this).find("option:selected").attr("value") : ""
);
});
$("#ddMobileExtension").on("click", function(e){
if(toggled == 1){
// On dropdown being opened, set the option text back
// to the more readable form
$(e.target).find("option:selected").text($(e.target).find("option:selected").data("data-txt"));
toggled = 0;
} else {
// On dropdown being closed, set the option text back
// to the +XX format
$(this).find("option:selected").attr("value") != "-1" ? $(e.target).find("option:selected").text("+" + $(this).find("option:selected").attr("value")) : "";
toggled = 1;
}
}).blur(function(){
// Catch for tabbing out and back in mid-selection
toggled = 1;
});
});
<select ID="ddMobileExtension" style="width:61px">
<option Value="-1" Text="" />
<option Value="44">United Kingdom (+44)</option>
<option Value="1">United States (+1)</option>
<option Value="1784">Saint Vincent and the Grenadines (+1784)</option>
<option Value="976">Mongolia (+976)</option>
</select>
最佳答案
只需在选定的option 元素
中添加和删除label 属性
即可实现。我们应该使用 mousedown 事件
来避免这种麻烦,当下拉菜单重新打开并选中一个项目时,文本会恢复原样。使用 click 事件
时,更新选项实际上需要一些时间。单击选择框时在 DevTools 中检查此内容。
它在 firefox、chrome 和 IE 中运行良好。
最终固定码:jsFiddle
$(function() {
$("#ddMobileExtension").change(function() {
var label = $(this).find("option:selected")[0].label;
$($(this).find("option:selected")[0]).attr("label", label.substring(label.indexOf("(") + 1, label.indexOf(")")));
});
$("#ddMobileExtension").mousedown(function(e) {
var rem = document.querySelector('option[label]')
if (rem) {
rem.removeAttribute("label")
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select ID="ddMobileExtension" style="width:61px">
<option Value="-1" Text="" />
<option Value="44">United Kingdom (+44)</option>
<option Value="1">United States (+1)</option>
<option Value="1784">Saint Vincent and the Grenadines (+1784)</option>
<option Value="976">Mongolia (+976)</option>
</select>
关于javascript - 如何在 onclick 上更改选项项的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42558804/