javascript - 如何从选择元素 ID 中获取 select2 的类 .select2-search?
问题描述
鉴于id
我与之交互的单个选择元素,我试图一直遍历以获取类.select2-search
以select2
在我的函数中使用它,但没有运气。
function hideSelect2Keyboard(ID) {
var Select2Search = $('#' + ID).prev().find('.select2-drop').find('.select2-search');
console.log(Select2Search);
$(Select2Search + ' input, :focus,input').prop('focus', false).blur();
}
$("select").select2().on("select2-open select2-close", function() {
var ID = $(this).attr('id');
hideSelect2Keyboard(ID);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script>
<label for="Salutation">Salutation:</label>
<select class="" name="" id="Salutation">
<option value="Mrs">Mrs</option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
</select>
<label for="Gender">Gender:</label>
<select class="" name="" id="Gender">
<option value="Female">Female</option>
<option value="Male">Male</option>
<option value="Transgender">Transgender</option>
</select>
控制台没有错误,但我无法获得课程.select2-search
。我在这样的控制台节目中尝试了上面的查询
select元素转换为select2后的html结构如下:
这意味着我有选择元素 ID,#Salutation
我希望从这里获得 class .select2-search
。
它有什么问题,如何.select2-search
从给定的选择 ID 中获取课程?谢谢。
解决方案
Select2 有一个名为dropdownCssClass的选项,如果您在此处为每个选择指定一个唯一值,则 select2 呈现的 html 的父 div 将具有此 css 类,因此您可以访问它并轻松找到其中的元素,我会将代码更改为这个
<label for="Salutation">Salutation:</label>
<select class="" name="" id="Salutation" data-selector='salutation'>
<option value="Mrs">Mrs</option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
</select>
<label for="Gender">Gender:</label>
<select class="" name="" id="Gender" data-selector='salutation'>
<option value="Female">Female</option>
<option value="Male">Male</option>
<option value="Transgender">Transgender</option>
</select>
请注意,我为每个选择添加了一个数据属性,然后在您的初始化代码中您可以执行此操作
$("select").each(function(){
var selector = $(this).data('selector')
$(this).select2({
dropdownCssClass: selector
}).on("select2-open select2-close", function() {
hideSelect2Keyboard(selector);
});
});
现在每个呈现的选择都将有一个具有指定类的父级现在您可以选择它在其中找到例如
var yourDiv = $('.salutation').find('.select2-search')
推荐阅读
- node.js - Express & Firebase - 无法在重定向前设置标头
- python - 有人可以解释一下这里发生的调用堆栈吗?它调用 D、B、C、A。你能提供它是如何发生的吗
- mysql - 子查询中的mysql最小值和最大值
- java - 如何使用 android studio 在本地存储应用数据?
- c# - SWIG/C#:转换 std::vector
到字节[] - java - 在 GridPane JavaFx 中选择单元格
- dart - Stack父级上的相对位置
- php - 使用 PHP 和 SQL 的日期间隔
- javascript - 变量的setter可以调用它的getter吗
- android - 不能在意图中同时传递多个整数