Javascript 如何更改onclick上选项项的文本

我一直在尝试为电话号码分机设置一个下拉列表，该列表将显示分机（仅+xxx，例如+44），而下拉列表将包含更具描述性的文本，如“英国（+44）”

我设法取得了一些进展，但当下拉列表被选中并重新打开时，我很难恢复文本。下拉列表将显示正确的值，但选项列表仍将显示数字（不过，它在firefox中运行良好，但至少在chrome/IE中不起作用）

如果您能提供帮助，我将不胜感激，最好是在仍然使用“标准”输入控件的情况下

当前代码/JSFIDLE:

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>

var-toggled=1；
$（函数（）{
$（“#ddMobileExtension选项”）。每个（函数（）{
//为所有选项设置数据项
$（this.data（“数据txt”，$（this.text（））；
});
$（“#ddMobileExtension”）.change（函数（）{
$（“选项”，此）。每个（函数（）{
//将所有选项重置为其相应的数据项
$（this.text（$（this.data（“data txt”））；
});
//将所选选项设置为+XX
//（前提是它不是第一项）
$（此）.find（“选项：选定”）.text(
$（此）.find（“选项：选定”）.attr（“值”）！=“-1”？“+”+$（此）.find（“选项：选定”）.attr（“值”）：“”
);
});
$（#ddMobileExtension”）。在（“单击”上，函数（e）{
如果（切换==1）{
//打开下拉列表时，将选项文本设置回原位
//以更具可读性的形式
$（e.target）.find（“option:selected”）.text（$（e.target）.find（“option:selected”）.data（“data txt”）；
切换=0；
}否则{
//关闭下拉列表时，将选项文本设置回原位
//转换为+XX格式
$（此）.find（“选项：选定”）.attr（“值”）！=“-1”？$（e.target）.find（“选项：选定”）.text（“+”+$（此）.find（“选项：选定”）.attr（“值”）：”；
切换=1；
}
}).blur（函数（）{
//用于在选择中向外和向后突出的捕捉
切换=1；
});
});
联合王国（+44）
美国（+1）
圣文森特和格林纳丁斯（+1784）
蒙古（+976）

---

只需在所选的

选项元素中添加和删除
标签属性即可。我们应该使用
mousedown事件
，以避免在选择某个项目后重新打开下拉列表时出现文本还原的问题。使用
单击事件
时，在选项中更新实际上需要一段时间。单击“选择”框时，请在DevTools中选中此项。
它在firefox、chrome和IE中运行良好

最终固定代码：


$（函数（）{
$（“#ddMobileExtension”）.change（函数（）{
var label=$（this）.find（“选项：已选定”）[0].label；
$（$（this.find（“option:selected”）[0]）.attr（“label”，label.substring（label.indexOf（“”+1，label.indexOf（“”））；
});
$（“#ddMobileExtension”）.mousedown（函数（e）{
var rem=document.querySelector（'选项[标签]'）
如果（rem）{
rem.removeAttribute（“标签”）
}
});
});

联合王国（+44）
美国（+1）
圣文森特和格林纳丁斯（+1784）
蒙古（+976）
下面是我要做的，利用jQuery UI自动完成：


HTML

<input ID="ddMobileExtension" style="width:61px" />

<select ID="ddMobileExtension" style="width:61px">
  <option value="-1"></option>
  <option value="44" data-orig-text="United Kingdom (+44)">United Kingdom (+44)</option>
  <option value="1" data-orig-text="United States (+1)">United States (+1)</option>
  <option value="1784" data-orig-text="Saint Vincent and the Grenadines (+1784)">Saint Vincent and the Grenadines (+1784)</option>
  <option value="976" data-orig-text="Mongolia (+976)">Mongolia (+976)</option>
</select>

这就是你描述的方式

如果您不想这样做，可以按照您的建议，在选择后更改
选项
的文本


HTML

<input ID="ddMobileExtension" style="width:61px" />

<select ID="ddMobileExtension" style="width:61px">
  <option value="-1"></option>
  <option value="44" data-orig-text="United Kingdom (+44)">United Kingdom (+44)</option>
  <option value="1" data-orig-text="United States (+1)">United States (+1)</option>
  <option value="1784" data-orig-text="Saint Vincent and the Grenadines (+1784)">Saint Vincent and the Grenadines (+1784)</option>
  <option value="976" data-orig-text="Mongolia (+976)">Mongolia (+976)</option>
</select>

希望有帮助

IE 8->11的更新

此代码在Internet Explorer中的操作与在Internet Explorer中的操作不同。这将在Edge中运行

请参阅更多：

不幸的是，IE的所有版本（甚至IE 11）都会异步触发
blur
&
focus
事件，并且没有简单的方法可以全面解决它，从而在jQuery中包含该解决方法

好消息是它在新的微软边缘浏览器中得到了修复，但IE11将永远保持不变

所以您想重置
焦点上的每个选项
？我看到您在小提琴中启用了Jquery UI。您是否愿意使用“自动完成”选项？不一定希望将每个选项重置为“聚焦”
，这只是我试图实现目标的一种方式。最好是把它作为一个下拉菜单，这在Firefox51.0.1上对我来说似乎不起作用，可能与@L.F是的，对。我们可以用不同的方式修复这个bug，看到这个链接唯一的问题是它现在让IE无法正常工作；当您重新打开下拉列表时，它会使IE取消选择下拉列表，因此您必须打开它两次。但这很容易解决，通过添加一个检查浏览器是否为Firefox，然后检查它是否工作正常查看基于选择的解决方案它似乎在IE中失败不幸的是IE在重新打开下拉列表时保留了选项文本的数值，而不是显示文本，使其不执行
模糊
或不触发
焦点
。将查看ie是否还需要其他功能。发现：不幸的是，ie的所有版本（甚至ie 11）都异步触发模糊和聚焦事件，并且没有简单的方法可以全面解决此问题，从而在jQuery中包含此解决方法。好消息是它在新的微软边缘浏览器中得到了修复，但IE11将永远保持不变。请看：我没有看到让IE以同样的方式工作的方法：有所有建议解决方法的示例。它在Edge中确实有效。