javascript - 选择 2 带有大写名称的 jquery 自定义属性国家名称
问题描述
我正在尝试添加一个自定义属性来选择 2 个选项,即使我使用“数据名称”搜索该选项也应该显示
<select name="countries" class="vat" id="example">
<option value="USA" data-name="Newyork" selected="selected">United States</option>
<option value="UK" data-name="london">Unied Kingdom</option>
<option value="DE" data-name="Berlin">Germany</option>
</select>
我试图在搜索中接近,如果我输入柏林,德国应该出现在选择列表中
<script type="text/javascript">
$(document).ready(function() {
$("#example").select2().find(":selected").data("name");
});
</script>
请尝试帮助我
谢谢
解决方案
您可以使用select2插件的 matcher 方法。因此,每当用户在输入框中输入内容时,您都可以使用..indexOf(input_value)
. 如果值为true
然后选项将被显示,否则它将被隐藏。
演示代码:
$(function() {
$("select").select2({
"width": "150px",
matcher: function(term, text, option) {
//get input box value
var input_value = $(".select2-input").val().toLowerCase();
//get the data attribute value..
var data_name = $(option[0]).data("name").toLowerCase();
//if match ..show that option
return data_name.indexOf(input_value) != -1 || option[0].textContent.toLowerCase().indexOf(input_value) != -1;
}
})
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<select name="countries" class="vat" id="example">
<option value="USA" data-name="Newyork" selected="selected">United States</option>
<option value="UK" data-name="london">Unied Kingdom</option>
<option value="DE" data-name="Berlin">Germany</option>
</select>
推荐阅读
- javascript - 将 Vue.JS 添加到现有的 dotnet core 2.2 站点
- javascript - Frameset:如何启动全屏模式/全屏不工作?
- java - 如何按日期过滤多个文档中的数据 Firestore,Android,Java
- angular - 如何从使用 azure 广告登录的 Angular 7 访问图形 API
- jquery - 如何使用 jquery 在选择中附加 2 个选项?
- c++ - 如何在不复制数据的情况下将 cv::Mat 转换为 2d std::vector
- hyperledger-fabric - 如何定义peer是endorsing peer还是Anchor peer
- python - 如何使用 Authlib 和 GSpread 刷新身份验证令牌?
- ssh - 在 SSH 中重命名多个文件
- java - 如何在 android gradle 构建中实现脱糖?