Return 用户点击停用选项时的选项文本

Question

我有一个 select 有一个停用选项。如果用户单击它，我需要 return 在警报中显示该选项的文本。

jQuery('#test.option').click(function() {
    alert(jQuery(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='test'>
  <option>AAAAAAAA</option>
  <option>BBBBBBBB</option>
  <option disabled="disabled">CCCCCCCC</option>
</select>

这只是一个例子，不过我有真正的计划。我有一个后端，我在其中使用每个选项创建 select 并且可以在其中指定每个选项应显示的文本，并且我需要选项的 id 或文本，以找到呈现给的相应文本DOM 但隐藏了。

但是给选项添加点击事件好像是不可能的

编辑：这不是重复的，因为我说的是 select 选项而不是输入。

Answer 1

在这种情况下，我能想到的唯一方法是删除 disabled 并使用 CSS 创建效果。然后阻止用户使用 JS 选择它。在尝试解决 JS 问题时，我并没有深入操作 CSS，但您可以继续解决 CSS.

$(document).ready(function() {
  var previous;

  $("#test").on('focus', function() {
    // Store the current value on focus and on change
    previous = this.value;
  }).change(function() {
    // If it's the option we want to disable, we set the select as the previous value
    if ($(this).val() == 3) {
      alert("Nope!")
      $('#test').val(previous);
    } else {
      // Make sure the previous value is updated
      previous = this.value;
    }
  });
});

.isDisabled {
  background-color: rgb(229, 229, 229) !important;
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='test'>
  <option>1</option>
  <option>2</option>
  <option class="isDisabled">3</option>
</select>

Answer 2

您可以使用此解决方法

var lastSel;
  
$("#test").on('focus', function () {
  if ($('option:selected', this).attr('data-disabled') != "true") {
   lastSel = $("#test").prop('selectedIndex');
  }
}).change(function() {
  if ($('option:selected', this).attr('data-disabled') == "true") {
      alert('Item is disabled')
      $("#test").prop('selectedIndex', lastSel);
    } else {
     lastSel = $("#test").prop('selectedIndex');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <select id="test">
  <option>AAAAAAAA</option>
  <option>BBBBBBBB</option>
  <option data-disabled="true" style="color: grey">CCCCCC</option>
  </select>

Return 用户点击停用选项时的选项文本

Return option text if users clicks on a deactivated option

html

javascript

jquery

select

html-select