Question

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

我写了一个简短的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>

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

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

Answer 1

首先：由于我不知道响应json，因此我不得不模拟您的fetch代码

您的代码存在一些问题。

您的代码
```
$('#col1').on('change','#val1', function(){
$('#val1').selectpicker('refresh'));
});
```
什么也没做。
a）如果您选择其他事件，则仅触发change事件选项比当前选择的。您需要的是称为变异观察者，即有点复杂。在我的解决方案中，我只是手动触发更改事件。 $('#val1').trigger('change');
b）您似乎对jQuery on()方法有点误解。您编写的代码是：如果#col1选择捕获了一个事件，该事件是从#val1选择触发的，则执行此并做。但这永远不会发生。 #val1上的任何事件都会使DOM冒泡，但绝不会横side。
您必须编写导入jQuery的脚本。后面的一种将清除selectpicker方法
<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>

为什么我的selectpicker字段无法直观地更新选项？

1 个答案: