bootstrap-select动态改变option为空

问题描述

用bootstrap-select做一个逻辑，我有数据：

{"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会出现["B1002", "B1003"]，如果没有选择select1就点击select2，alert('please select 1 first');
当我动态改变select2的option的值时，发现select2为空。

问题原因

改变完select要重新刷新一下dom。

问题解决

第一个select的id=protein，第二个select的id=chain

$.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。

$('#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清空否则会叠加。

$('#chain').selectpicker('refresh');
$('#chain').selectpicker('render');

这个就是问题的解决，动态append完option，刷新并渲染一下dom。

$('#chain').on('shown.bs.select',function(e, clickedIndex, isSelected, previousValue){
    var protein = $('#protein').val();
    if(protein==''){alert('please select protein first!');}
});

没有选择第一个select，点击第二个select，alert。