Почему мое поле selectpicker не обновляет параметры визуально? - PullRequest
Новая
       25

Почему мое поле selectpicker не обновляет параметры визуально?

2 голосов
/ 21 мая 2019

У меня есть 2 разных поля выбора в моем веб-приложении.2-е поле выбора является полем выбора, и параметры будут изменены в зависимости от выбранного значения в 1-м поле выбора.Независимо от того, сколько раз я пытался обновить средство выбора, параметры все равно не обновляются в соответствии с первым полем выбора.В фоновом режиме данные выбирались и заполнялись в селекторе выбора только для того, чтобы он не отображался.

Я написал короткий Java-скрипт, чтобы помочь получить новые соответствующие значения для поля выбора выбора в соответствии с первым полем выбора.Но отображаемые параметры не обновляются

HTML + Javascript 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></script>  

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form method="POST">

        <select id="col1" onchange="refreshList();">
            {% for c in cols: %}
                <option value="{{c}}">{{c}}</option>
            {% endfor %}
        </select>
        <select id ="val1" class="selectpicker" multiple data-live-search="true">
            {% for uv in unique_val: %}
                <option value="{{uv}}">{{uv}}</option>
            {% endfor %}
        </select>
        <input type="submit">
    </form>
    <script>
        function refreshList(){
            var col_select = document.getElementById('col1');
            var uv_select = document.getElementById('val1');

            column = col_select.value;

            fetch('/col/' + column).then(function(response) {
                response.json().then(function(data) {
                    var optionHTML = '';
                    for (var uv of data.unique_val) {
                        optionHTML += '<option value="' + uv.id + '">' + uv.value + '</option>';
                    }
                    uv_select.innerHTML = optionHTML;

                })
            });
        }   
    </script>
    <script>
        $('#col1').on('change','#val1', function(){
             $('#val1').selectpicker('refresh'));
        });

    </script>
</body>
</html>

Ожидается: параметры в окне выбора будут обновляться и отображаться в соответствии со значением, выбранным из системы.

Факт: параметры извлекаются успешно, но не добавляются в список параметров моего средства выбора, только что полученные значения отображаются только после предыдущего набора параметров.

1 Ответ

1 голос
/ 21 мая 2019

Первое: мне пришлось смоделировать ваш fetch код, так как я не знаю ответ json

Есть некоторые проблемы с вашим кодом.

  1. Вашкод 

    $('#col1').on('change','#val1', function(){
$('#val1').selectpicker('refresh'));
});

    Ничего не делает.
    a) Событие change запускается только в том случае, если вы выбираете другой параметр, отличный отв настоящее время выбрано.То, что вам нужно, называется наблюдателем мутаций, который немного сложнее.В моем решении я просто запускаю событие изменения вручную.$('#val1').trigger('change');
    b) Похоже, у вас небольшое заблуждение относительно метода jQuery on().То, что вы делаете в коде: Если #col1 select перехватывает событие, которое вызывается из #val1 select, делайте это и это.Но этого никогда не произойдет.Любое событие на #val1 будет всплывать в DOM, но не вбок.

  2. У вас есть два скрипта, которые импортируют jQuery.Более поздний из них уничтожит методы выбора средств выбора
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

console.clear()

function refreshList(e) {
  var col_select = document.getElementById('col1');
  var uv_select = document.getElementById('val1');

  column = col_select.value;


  var new_uv_list = [
    [{
        id: "01",
        value: "Zero One",
      },
      {
        id: "02",
        value: "Zero Two",
      },
    ],
    [{
      id: "11",
      value: "One One",
    }, ],
    [{
        id: "11",
        value: "Two One",
      },
      {
        id: "12",
        value: "Two Two",
      },
    ],
    [{
        id: "33",
        value: "Three Three",
      },
      {
        id: "36",
        value: "Three Six",
      },
      {
        id: "39",
        value: "Three Nine",
      },
    ],
  ]

  //  fetch('/col/' + column).then(function(response) {
  //    response.json().then(function(data) {
  var optionHTML = '';
  //      for (var uv of data.unique_val) {
  if (new_uv_list[column]) {
    for (var uv of new_uv_list[column]) {
      optionHTML += '<option value="' + uv.id + '">' + uv.value + '</option>';
    }
  }
  uv_select.innerHTML = optionHTML;
  $('#val1').trigger('change');

  //    })
  //  });
}

$('#val1').on('change', function() {
  $('#val1').selectpicker('refresh');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<!--<script src="https://code.jquery.com/jquery-3.3.1.js"></script>-->





<form method="POST">

  <select id="col1" class="selectpicker" onchange="refreshList(event);">
    <option value="">---</option>
    <option value="0">Zero</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <select id="val1" class="selectpicker" multiple data-live-search="true">
  </select>
  <input type="submit">
</form>
...