javascript - 如何在 Select2 上使用动态选择?
问题描述
我想使用Select2
, 基于 first选择分组国家select
。我正在尝试使用基本Select2
代码,但第二个select
无法data-group
正常工作。
我的问题是:
更改第一个
select
(大陆)选项,然后移动到第二个(国家)并选择一个国家,现在回到大陆并更改为另一个。转到第二个并选择另一个国家,它不会选择。
示例:选择欧洲 > 选择意大利 > 选择美国 > 选择阿根廷 > 再次选择欧洲 > 选择任何国家 > 阿根廷将保留为所选国家。
这是一个小视频,显示了正在发生的问题:Youtube Link
我还在片段上附加了我的工作代码。
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
$(function(){
$('#groups').on('change', function(){
var val = $(this).val();
var sub = $('#sub_groups');
$('option', sub).filter(function(){
if (
$(this).attr('data-group') === val
|| $(this).attr('data-group') === 'SHOW'
) {
if ($(this).parent('span').length) {
$(this).unwrap();
}
} else {
if (!$(this).parent('span').length) {
$(this).wrap( "<span>" ).parent().hide();
}
}
});
});
$('#groups').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<select class="js-example-basic-single" id="groups" style="width:50%;">
<option value='America'>America</option>
<option value='Europe'>Europe</option>
<option value='Asia'>Asia</option>
<select>
<select class="js-example-basic-single" id="sub_groups" style="width:50%;">
<option data-group='SHOW' value='0'>-- Select --</option>
<option data-group='America' value='Argentina'>Argentina</option>
<option data-group='America' value='Brazil'>Brazil</option>
<option data-group='America' value='Chile'>Chile</option>
<option data-group='Europe' value='Italy'>Italy</option>
<option data-group='Europe' value='France'>France</option>
<option data-group='Europe' value='Spain'>Spain</option>
<option data-group='Asia' value='China'>China</option>
<option data-group='Asia' value='Japan'>Japan</option>
<select>
这个问题有什么解决办法吗?
解决方案
sub_groups
更改时将 ' 值重置为 0 groups
。
$('#groups').on('change', function(){
var val = $(this).val();
var sub = $('#sub_groups');
sub.val(0);
...
});
另外作为旁注,select
您的 HTML 中的标签没有正确关闭。
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
$(function() {
$('#groups').on('change', function() {
var val = $(this).val();
var sub = $('#sub_groups');
sub.val(0);
$('option', sub).filter(function() {
if ($(this).attr('data-group') === val ||
$(this).attr('data-group') === 'SHOW') {
if ($(this).parent('span').length) {
$(this).unwrap();
}
} else {
if (!$(this).parent('span').length) {
$(this).wrap("<span>").parent().hide();
}
}
});
});
$('#groups').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<select class="js-example-basic-single" id="groups" style="width:50%;">
<option value='America'>America</option>
<option value='Europe'>Europe</option>
<option value='Asia'>Asia</option>
</select>
<select class="js-example-basic-single" id="sub_groups" style="width:50%;">
<option data-group='SHOW' value='0'>-- Select --</option>
<option data-group='America' value='Argentina'>Argentina</option>
<option data-group='America' value='Brazil'>Brazil</option>
<option data-group='America' value='Chile'>Chile</option>
<option data-group='Europe' value='Italy'>Italy</option>
<option data-group='Europe' value='France'>France</option>
<option data-group='Europe' value='Spain'>Spain</option>
<option data-group='Asia' value='China'>China</option>
<option data-group='Asia' value='Japan'>Japan</option>
</select>
推荐阅读
- jenkins-pipeline - 如何使用 wget 从 jenkins 工件下载文件,其中文件名版本将更改
- sql - 在 Excel 中运行 SQL IN 查询
- java - 在列表中按 Id 和另一个 Id 查找记录
- r - 使用 data.table 和 R.utils 获取 gzip 文件的一致 md5 校验和
- angular - 角度检查表单是否具有原始值
- javascript - WebGL2:不完整的帧缓冲区
- java - 使用 type 进行原型 bean 注入
- pandas - 计算数据框中所有变量的出现次数
- linux - 非默认端口上的 imgproxy
- node.js - 由于 webdriver-manager 未被识别为内部或外部命令,Gitlab CI 端到端测试失败