问题描述 用bootstrap-select做一个逻辑,我有数据:
1 2 3 {"ligands" : {"pdb_id" : "1P7T" , "Ligands" : {"PG4" : ["B1002" , "B1003" ], "PEG" : ["A1001" ], "ACO" : ["A800" , "B900" ], "MG" : ["A1000" , "B1001" ], "PYR" : ["A810" , "B910" ]}}}
有两个select,点击select1,出现["PG4","PEG","ACO","MG","PYR"]
,然后点击”PG4”,select2的option会渲染为["B1002", "B1003"]
,如果没有选择select1就点击select2,alert('please select 1 first');
当我动态改变select2的option的值时,发现select2为空。
问题原因 改变完select要重新刷新一下dom。
问题解决 第一个select的id=protein,第二个select的id=chain
1 2 3 4 5 6 7 8 $.ajax({// url:'/PremPLIform/' +job_id, success:function (data) { for (p in data.pdb) {$('#protein' ).append('<option>' + data.pdb[p].MOLECULE + '</option>' )}}, error:function () { $('#protein' ).append('<option>get the data failed!please retry!</option>' ) } });
ajax渲染第一个select。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $('#protein' ).on('hidden.bs.select' , function (e, clickedIndex, isSelected, previousValue) { var protein = $('#protein' ).val(); $.ajax({ url:'/PremPLIform/' +job_id, success:function (data) { $("#chain" ).empty(); for (p in data.pdb) { for (ch in data.pdb[p].CHAIN){ if (protein==data.pdb[p].MOLECULE) $('#chain' ).append('<option>' + data.pdb[p].CHAIN[ch] + '</option>' ) }} $('#chain' ).selectpicker('refresh' ); $('#chain' ).selectpicker('render' ); }, error:function () { $('#chain' ).append('<option>get the data failed!please retry!</option>' ) } }); });
动态渲染第二个select,hidden.bs.select这个钩子函数是每当一个select列表向用户隐藏的时候执行回调函数。 $(“#chain”).empty();是每次执行回调函数的时候将option清空否则会叠加。
1 2 $('#chain' ).selectpicker('refresh' ); $('#chain' ).selectpicker('render' );
这个就是问题的解决,动态append完option,刷新并渲染一下dom。
如果没有选择第一个select,点击第二个select,alert。
1 2 3 4 $('#chain' ).on('shown.bs.select' ,function (e, clickedIndex, isSelected, previousValue ) { var protein = $('#protein' ).val(); if (protein=='' ){alert('please select protein first!' );} });
最终效果可以看这里https://lilab.jysw.suda.edu.cn/research/PremPLI/getPartner/2021080813451494823004470 .