为什么我的选择器字段没有直观地更新选项？

Question

我的 Web 应用程序中有 2 个不同的 select 字段。第二个 select 字段是一个 select 选择器字段，选项将根据第一个 select 字段中的 selected 值更改。无论我尝试更新 select 选择器多少次，选项仍然不会相应地更新到第一个 select 字段。在后台，数据被获取并填充到 select 选择器中，只是它没有显示它。

我写了一个简短的 java 脚本来帮助根据第一个 select 字段为 select 选择器字段获取新的对应值。但是显示的选项没有更新

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>

预计：select选择器中的选项将根据从系统获取的值更新和显示。

实际：选项已成功获取，但未添加到我的 select 选择器的选项列表中，新获取的值仅出现在上一组选项的后面。

Answer 1

首先：我不得不模拟你的 fetch 代码，因为我不知道响应 json

您的代码存在一些问题。

您的代码
```
$('#col1').on('change','#val1', function(){
$('#val1').selectpicker('refresh'));
});
```
什么都不做。
a) change 事件只会被触发，如果你 select 一个不同的选项比当前 selected。你需要的是所谓的突变观察者，它是有点复杂。在我的解决方案中，我只是手动触发更改事件。 $('#val1').trigger('change');
b) 您似乎对 jQuery on() 方法有轻微的误解。您的代码所做的是：如果 #col1 select 捕获到从 #val1 select 触发的事件，则执行 this-and-that。但这永远不会发生。 #val1 上的任何事件都会在 DOM 上冒泡，但绝不会横盘整理。
您有两个导入 jQuery 的脚本。后者将消灭select选择器方法
<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>

为什么我的选择器字段没有直观地更新选项？

Why is my selectpicker field not updating the options visually?

javascript

html

bootstrap-selectpicker