时间戳

首页 > 解决方案 > 如果用户单击已停用的选项，则返回选项文本

javascript - 如果用户单击已停用的选项，则返回选项文本

问题描述

我有一个带有停用选项的选择。如果用户点击它，我需要在警报中返回该选项的文本。

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>

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

但是似乎不可能将点击事件添加到选项中。

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

标签： javascriptjqueryhtmlselecthtml-select

解决方案

在这种情况下，我能想到的唯一方法是删除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>

推荐阅读