javascript - 如何在 onclick 上更改选项项的文本

Question

我一直在尝试为电话号码扩展名设置一个下拉列表，该列表将显示扩展名(仅 +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>

jsFiddle

Answer 1

只需在选定的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>