隐藏 select2 多搜索框
Posted
技术标签:
【中文标题】隐藏 select2 多搜索框【英文标题】：Hide select2 multi search box 【发布时间】：2021-04-21 06:20:47 【问题描述】：如果 html 下拉列表中的值与某个值匹配，我正在尝试使 select2 搜索框可见。以下是我的代码 sn-p。 不知何故，始终显示 Select2 下拉菜单。 任何帮助表示赞赏...
我根据 select2 github repo 上的建议添加了 CSS https://github.com/select2/select2/issues/861
<html>
<style type="text/css">
.other
display: none !important;
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select class="one" name="one" id="one">
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<br>
<br>
<select class="other" name="other" multiple="multiple">
<option value="AL">Sample1</option>
<option value="WY">Sample2</option>
</select>
<script>
// In your javascript (external .js resource or <script> tag)
$("#one").change(function()
$('#value').change(function()
if($('#value').val() == '1')
$('.other').hide();
else
$('.other').show();
));
$(document).ready(function()
$(".other").select2(
tags: true
);
);
</script>
</html>【问题讨论】：
【参考方案1】：你能做这样的事情吗？不确定您的用户案例。但我会建议销毁选择然后隐藏。稍后再次创建实例并显示。
$("#one").change(function()
if($(this).val() == '3')
$('.other').select2('destroy');
$('.other').hide();
else
$(".other").select2(
tags: true
);
$('.other').show();
);
$(document).ready(function()
$(".other").select2(
tags: true
);
);
<html>
<style type="text/css">
.other
display: none !important;
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select class="one" name="one" id="one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<br>
<br>
<select class="other" name="other" multiple="multiple" style="width: 100px;">
<option value="AL">Sample1</option>
<option value="WY">Sample2</option>
</select>
</html>【讨论】：
【参考方案2】：$("#one").change(function()
console.log('me called');
if($('#one').val() == '1')
$('.select2').hide();
console.log($('#other'))
console.log('me called1');
else
$('.select2').show();
console.log('me called2');
);
这对你有用吗？ 选择 3 再选择 1 时，select2 元素消失。
【讨论】：
是的，我确实看到了控制台日志消息。但是默认情况下 select2 下拉菜单仍然可见。我现在也附上了截图。如果所选值为 3，但仍显示 select2 下拉列表，我已更改条件以显示第二个下拉列表。以上是关于隐藏 select2 多搜索框的主要内容，如果未能解决你的问题，请参考以下文章