Как восстановить выпадающее меню с выбором начальной загрузки? - PullRequest
Новая
       25

Как восстановить выпадающее меню с выбором начальной загрузки?

0 голосов
/ 12 сентября 2018

Я пытаюсь реализовать bootstrap-select в моем приложении. Я уже использую Bootstrap-twitter в своем приложении. В системе есть несколько раскрывающихся меню, в которых я хотел бы реализовать эту функцию. При загрузке страницы будет запущен bootstrap-select, и выпадающее меню будет заполнено из файла json. У меня есть форма в системе, где файл JSON может быть обновлен. В этом случае я перезагружаю файл JSON и вызываю функцию для повторной загрузки json. Проблема в том, что bootstrap-select ломается в этом случае. Я все еще могу щелкать и искать варианты, но в то же время все параметры отображаются под полем выбора ввода. Вот пример моего кода: 

var appData = {
  Buildings : [
    {BLDGNAME : "Test 1", BLDGNUMBER : "2234"},
    {BLDGNAME : "Test 2", BLDGNUMBER : "2534"},
    {BLDGNAME : "Test 3", BLDGNUMBER : "2734"},
    {BLDGNAME : "Test 4", BLDGNUMBER : "2294"}
  ]
}

$(document).ready(function(){
  loadBuildings();
});

function loadBuildings(){
    populateBuildings();
    /* Just to show the way I import JSON data.
    $.getJSON("JSON/Buildings.json?"+ new Date().getTime(), function(json) {
        appData.Buildings = json;
    }).done(function() {
        populateBuildings();
    }).fail(function(jqXHR, textStatus, errorThrown) {
        console.log( "Error: " + errorThrown);
    });
    */
}

function populateBuildings(){
    var fldBldg = $(".bldg-menu");
    fldBldg.find("option:gt(0)").remove(); // Remove all but the first option in select menu.

    $.each(appData.Buildings, function (key, value) {
        fldBldg.append($("<option></option>").val(value.BLDGNUMBER).text(value.BLDGNAME));
    });
    fldBldg.selectpicker("refresh");
}

$("#add").on("click",addNew);
function addNew(){
  appData.Buildings.push({BLDGNAME : "Test 5", BLDGNUMBER : "6234"});
  loadBuildings();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<form name="frmDemog" id="frmDemo">
  <div class="form-group">
    <label class="control-label" for="bldg"><span class="label label-primary">Building:</span></label>
    <select class="form-control bldg-menu selectpicker" name="frmDemo_bldg" id="frmDemo_bldg" data-live-search="true" required>
      <option value="">--Choose Building--</option>
    </select>
  </div>
</form>

<button type="button" name="add" id="add">Add New</button>

Если вы запустите фрагмент кода выше и нажмете кнопку добавления, вы увидите все опции под меню выбора. Я не уверен, как я могу перезагрузить selectpicker(), чтобы предотвратить такое поведение. Я пытался использовать selectpicker("refresh"), но это не помогло. Если кто-нибудь знает способ исправить это, пожалуйста, дайте мне знать. Спасибо.

1 Ответ

0 голосов
/ 12 сентября 2018

Этот код выбирает два элемента: DIV, сгенерированный Bootstrap-Select и SELECT. 

var fldBldg = $(".bldg-menu");

Измените его на: 

var fldBldg = $("select.bldg-menu");

Фиксированный код: 

var appData = {
  Buildings : [
    {BLDGNAME : "Test 1", BLDGNUMBER : "2234"},
    {BLDGNAME : "Test 2", BLDGNUMBER : "2534"},
    {BLDGNAME : "Test 3", BLDGNUMBER : "2734"},
    {BLDGNAME : "Test 4", BLDGNUMBER : "2294"}
  ]
}

$(document).ready(function(){
  loadBuildings();
});

function loadBuildings(){
    populateBuildings();
    /* Just to show the way I import JSON data.
    $.getJSON("JSON/Buildings.json?"+ new Date().getTime(), function(json) {
        appData.Buildings = json;
    }).done(function() {
        populateBuildings();
    }).fail(function(jqXHR, textStatus, errorThrown) {
        console.log( "Error: " + errorThrown);
    });
    */
}

function populateBuildings(){
    var fldBldg = $("select.bldg-menu");
    fldBldg.find("option:gt(0)").remove(); // Remove all but the first option in select menu.

    $.each(appData.Buildings, function (key, value) {
        fldBldg.append($("<option></option>").val(value.BLDGNUMBER).text(value.BLDGNAME));
    });
    fldBldg.selectpicker("refresh");
}

$("#add").on("click",addNew);
function addNew(){
  appData.Buildings.push({BLDGNAME : "Test 5", BLDGNUMBER : "6234"});
  loadBuildings();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<form name="frmDemog" id="frmDemo">
  <div class="form-group">
    <label class="control-label" for="bldg"><span class="label label-primary">Building:</span></label>
    <select class="form-control bldg-menu selectpicker" name="frmDemo_bldg" id="frmDemo_bldg" data-live-search="true" required>
      <option value="">--Choose Building--</option>
    </select>
  </div>
</form>

<button type="button" name="add" id="add">Add New</button>
...