当我们使用 jquery 在输入字段中输入相同的数据时，禁用下拉列表中的数据答案

【问题标题】：disabling the data from dropdown when same data we typed in input field with jquery当我们使用 jquery 在输入字段中输入相同的数据时，禁用下拉列表中的数据
【发布时间】：2023-02-06 20:16:29
【问题描述】：

我如何编写一个 jQuery 函数，仅当我们在输入字段中键入相同的数据时才禁用下拉列表中的值。

输入字段 - 新

所以从下拉新应该被禁用。

<select class="form-control" id="select2">
   <option value="1">New</option>
   <option value="2">OLD</option>
</select>

【问题讨论】：

标签： html jquery spring thymeleaf

【解决方案1】：

你可以这样做：

$('.typeVal').on("keyup change",function() {
  var $val = $(this).val();
  $('#select2 option').prop("disabled", function() {
    return $(this).text() == $val;
  });
});

此代码使用 jQuery 将事件处理程序绑定到具有类 .typeVal 的元素。事件处理程序将在这些元素上的“keyup”和“change”事件上触发。

当事件被触发时，代码获取触发事件的元素的值并将其存储在变量 $val 中。然后，它根据函数设置#select2 元素内所有元素的“禁用”属性。

如果元素的文本内容等于 $val，则该函数返回 true，这意味着如果它具有与触发元素相同的文本内容，它将禁用。如果的文本内容不等于 $val，函数返回 false，不会被禁用。

演示

$('.typeVal').on("keyup change",function() {
  var $val = $(this).val();
  $('#select2 option').prop("disabled", function() {
    return $(this).text() == $val;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="typeVal" />

<select class="form-control" id="select2">
  <option value="1">New</option>
  <option value="2">OLD</option>
</select>

【讨论】：