Вернуть текст опции, если пользователь нажимает на деактивированную опцию

Question

У меня есть выбор с деактивированной опцией. Мне нужно вернуть текст этой опции в предупреждении, если пользователь нажимает на него.

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>

Это всего лишь пример, хотя у меня есть реальные планы. У меня есть бэкэнд, где я создаю выбор для каждой опции, и там я могу указать текст, который должен отображаться для каждой опции, и мне нужен идентификатор или текст опции, чтобы найти соответствующий текст, который отображается в DOM, но скрыт .

Но, кажется, невозможно добавить событие щелчка к опции.

Редактировать: это не дубликат, поскольку я говорю о параметрах выбора, а не о входных данных.

Answer 1

Вы можете использовать этот обходной путь

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>

Answer 2

Единственный способ, который я могу придумать в этом случае, это удалить disabled и создать эффект с помощью CSS. А затем не используйте JS, чтобы пользователь выбрал его. Я не пошел далеко, чтобы манипулировать CSS, поскольку я пытаюсь решить проблему JS, но вы можете пойти дальше и обойти 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>