Question

我一直试图为显示扩展名的电话号码扩展名设置一个下拉列表（只是+ xxx，例如+44），而下拉列表则包含更具描述性的文字，例如＆＃ 34;英国（+44）＆＃34;代替。

我设法取得了一些进展，但是当我选择一个项目重新打开下拉列表时，我无法恢复文本。下拉列表将显示正确的值，但选项列表仍将显示数字（但是，它在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

只需在选定的label attribute中添加和删除option element即可。我们应该使用mousedown event来避免在选择项目重新打开下拉列表时使文本恢复的问题。使用click event时，实际上需要花时间更新选项。单击选择框时，在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>

Answer 2

这是我要做的，使用jQuery UI Autocomplete：

https://jsfiddle.net/Twisty/3nxu01vg/4/

<强> HTML

var extensions = [{
  label: "United Kingdom (+44)",
  value: 44
}, {
  label: "United States (+1)",
  value: 1
}, {
  label: "Saint Vincent and the Grenadines (+1784)",
  value: 1784
}, {
  label: "Mongolia (+976)",
  value: 976
}];

$(function() {
  $("#ddMobileExtension").autocomplete({
    source: extensions,
    minLength: 0
  }).click(function() {
    $(this).trigger("keydown");
  });
});

<强>的JavaScript

option

这就像你描述的方式一样。

如果您不想这样做，可以按照建议进行操作，方法是在选择后更改<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>的文字。

https://jsfiddle.net/Twisty/3nxu01vg/9/

<强> HTML

$(function() {
  $("#ddMobileExtension").focus(function(e) {
    var $items = $(this).find("option");
    $items.each(function(ind, elem) {
      if (ind !== 0) {
        $(elem).html($(elem).data("orig-text"));
      }
    });
  }).change(function(e) {
    var $item = $(this).find(":selected");
    if ($item.index() !== 0) {
      $item.html($item.val());
    }
    $(this).trigger("blur")
  });
});

<强>的JavaScript

blur

希望有所帮助。

IE 8的更新 - ＆gt; 11

此代码在Internet Explorer中的运行方式不同。这将在Edge中运行。

查看更多：https://github.com/jquery/jquery/issues/2511

不幸的是，所有版本的IE（甚至是IE 11）都会触发focus＆amp; class ViewController: UIViewController { @IBOutlet weak var segmentedControl: UISegmentedControl! @IBAction func segmentSelected(_ sender: UISegmentedControl) { UserDefaults.standard.set(sender.selectedSegmentIndex, forKey: "chosenLanguage") } override func viewDidLoad() { super.viewDidLoad() if let value = UserDefaults.standard.value(forKey: "chosenLanguage"){ let selectedIndex = value as! Int segmentedControl.selectedSegmentIndex = selectedIndex } } }事件是异步的，没有简单的方法可以解决它在jQuery中包含变通方法的问题。

好消息是它已在新的Microsoft Edge浏览器中修复，但IE 11将永远保留。

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

2 个答案: