英文:
disabling the data from dropdown when same data we typed in input field with jquery
问题
你可以编写一个 jQuery 函数，以便仅当输入字段中的文本与下拉菜单中的选项匹配时，禁用该选项。
$(document).ready(function() {
$('#select2').change(function() {
var inputText = $('#newInputField').val(); // 获取输入字段的值
var selectedOption = $('#select2 option:selected').text(); // 获取所选选项的文本
if (inputText === selectedOption) {
$('#select2 option:selected').prop('disabled', true); // 如果匹配，禁用选项
} else {
$('#select2 option').prop('disabled', false); // 否则启用所有选项
}
});
});
请注意，你需要将 #newInputField 替换为实际的输入字段的 ID。这个函数会在输入字段的值发生变化时检查匹配并相应地禁用或启用下拉菜单中的选项。
英文:
How can I write a jQuery function that disables the value from dropdown only if same data we typed in input field.
Input Field - NEW
So from drop down new should be disabled.
<select class="form-control" id="select2">
<option value="1">New</option>
<option value="2">OLD</option>
</select>
答案1
得分: 0
你可以这样做：
$('.typeVal').on("keyup change",function() {
var $val = $(this).val();
$('#select2 option').prop("disabled", function() {
return $(this).text() == $val;
});
});
这段代码使用jQuery将事件处理程序绑定到具有类名.typeVal的元素上。事件处理程序将在这些元素上的"keyup"和"change"事件上触发。
当事件触发时，代码获取触发事件的元素的值，并将其存储在变量$val中。然后，它根据一个函数设置#select2元素内所有
如果
英文:
You can do it like this:
$('.typeVal').on("keyup change",function() {
var $val = $(this).val();
$('#select2 option').prop("disabled", function() {
return $(this).text() == $val;
});
});
This code is using jQuery to bind an event handler to elements with the class .typeVal. The event handler will be triggered on "keyup" and "change" events on these elements.
When the event is triggered, the code gets the value of the element that triggered the event and stores it in a variable $val. Then, it sets the "disabled" property of all the <option> elements within the #select2 element based on a function.
The function returns true if the text content of the <option> element is equal to $val, meaning it will disable the <option> if it has the same text content as the triggering element. If the text content of the <option> is not equal to $val, the function returns false and the <option> will not be disabled.
Demo
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
$('.typeVal').on("keyup change",function() {
var $val = $(this).val();
$('#select2 option').prop("disabled", function() {
return $(this).text() == $val;
});
});
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论