javascript - 在select上同时注册onchange和onclick时，点击事件被触发两次

Question

目标:拥有 select谁的option当用户单击 select 时具有嵌套结构，但是当用户选择option时该选项应“正常”显示(即没有前导空格)。

尝试使用 JS 和 Jquery 解决方案:我的 JS 远非复杂，所以我提前道歉:)

我尝试使用 .on("change")和 。 on("click")更改选定的 option值(通过调用 .trim() 因为我使用   实现了“嵌套”结构)。我还存储了所选 option 的原始值因为我想恢复 select菜单恢复到其原始结构，以防用户选择另一个 option .

问题:为 .on("click") 注册的函数被调用两次，因此 select value 立即将其自身重置为原始值。

我怀疑使用 CSS 有一个更简单的解决方案。我很乐意接受提出此类解决方案的答案。

JSFiddle:https://jsfiddle.net/dv6kky43/9/

<form>
  <select id="select">
    <option value=""></option>
    <option value="a">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a</option>
    <option value="b">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b</option>
  </select>
</form>
<textarea id="output"/>

var orig;
var output = $("#output");
output.val("");

function onDeviceSelection(event){
  output.val(output.val() + "\nonDeviceSelection");
  var select = event.target;
  orig = select.selectedOptions[0].text;
  select.selectedOptions[0].text = select.selectedOptions[0].text.trim()

}

function resetDeviceSelectionText(event) {
  output.val(output.val() + "\nresetDeviceSelectionText");
  var select = event.target;
  if (orig !== undefined){
    select.selectedOptions[0].text = orig;
  }
}

$("#select").on("change", onDeviceSelection);
$("#select").on("click", resetDeviceSelectionText);

Answer 1

如果您已经在使用 jQuery，为什么不使用 data 函数来存储原始值。这样您还可以指定不同的嵌套级别。

(function($){
  $(document).on('change', 'select', function(event) {
    $(this).find('option').each(function(index, element){
      var $option = $(element);

      // Storing original value in html5 friendly custom attribute.
      if(!$option.data('originalValue')) {
        $option.data('originalValue', $option.text());
      }
      
      if($option.is(':selected')) {
        $option.html($option.data('originalValue').trim());
      } else {
        $option.html($option.data('originalValue'));
      }
    })
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <select id="select">
    <option value=""></option>
    <option value="a">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a</option>
    <option value="b">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b</option>
  </select>
</form>

一旦我看到警告，如果在进行先前的选择后打开下拉列表，则所选选项也会在列表中显示为 trim :

它对你还有效吗？