Bootstrap 多选 - 从第一个多选中过滤出第二个多选

Question

我目前在一个页面上有 2 个 multiselect 下拉菜单，一个叫 'hazards'，另一个叫 'hp_codes'。他们都从 SQL 数据库填充他们的列表，并且想法是 'hp_codes' 将根据 select 在 'hazards' 中编辑的内容填充。

所以理论上有人可以 select hazard1、hazard2 和 hazard3，然后第二个列表将产生与这 3 个危险相关的选项（某些选项可能相同 - 重复项将被删除）。

我对此有点新手，因此抛出了一个网络，所以我非常感谢任何建议。

到目前为止，我已经尝试了这个问题的解决方案（）无济于事（我输入了所有选项以阻止页面从数据库中提取 hp_codes。从维护页面的角度来看，能够保持从数据库中提取这些内容对于将来的更新非常有帮助。

实现此目标的最佳方法是什么？

编辑这是我的表单中当前的一个片段。将数据从 DB

拉入 multiselect

// Method to bind Dropdown
function fill_hazards_select_box($con)
{ 
 $output = '';
 $query=mysqli_query($con,"SELECT hazards FROM Chemilist_states");
    $cnt=1;
    while($row=mysqli_fetch_array($query))
    {
    $output .= "<option value='$row[0]'> $row[0] </option>";
    }

 return $output;
}

function fill_hp_codes_select_box($con)
{ 
 $output = '';
 $query=mysqli_query($con,"SELECT hp_codes FROM Chemilist_hazards");
    $cnt=1;
    while($row=mysqli_fetch_array($query))
    {
    $output .= "<option value='$row[0]'> $row[0] </option>";
    }

 return $output;
}

$month = date('m');
$day = date('d');
$year = date('Y');

$today = $year . '-' . $month . '-' . $day;
?>

然后初始化插件

    <script>
        $(document).ready(function() {
            $('#hazards').multiselect({
                maxHeight: 300,
                buttonWidth: '505px',
                dropRight: true,
                nonSelectedText: 'Select Hazard Statement(s)',
                includeResetOption: true,
                includeResetDivider: true,              
                enableFiltering: true,
                includeFilterClearBtn: true,
                enableCaseInsensitiveFiltering: true,
            });
        });
    </script>

        <!-- Initialize the plugin: -->
    <script>
        $(document).ready(function() {
            $('#hp_codes').multiselect({
                maxHeight: 300,
                buttonWidth: '505px',
                dropRight: true,
                nonSelectedText: 'Select Hazard Properties',
                includeResetOption: true,
                includeResetDivider: true,              
                enableFiltering: true,
                includeFilterClearBtn: true,
                enableCaseInsensitiveFiltering: true,
            });
        });
    </script>

最后将 mutliselect 放入表格

    <div class="form-group">
    <label>Hazard Statements: <span class="text-danger">*</span></label><br>

                                                                            <!-- Build your select: -->
    <select id="hazards" name="hazards[]"  class="form-control"  multiple="multiple" required>
    <?php echo fill_hazards_select_box($con);?> 
        </select>   
                                                                            </div>

                                                                        <div class="form-group">

    <label>Hazard Properties: <span class="text-danger">*</span></label><br>

                                                                            <!-- Build your select: -->
    <select id="hp_codes" name="hp_codes[]"  class="form-control"  multiple="multiple" required>
    <?php echo fill_hazards_select_box($con);?> 
    </select>   
                                                                            </div>

Answer 1

首先，您需要在初始 select 上有一个 change 处理程序。然后，您需要通过循环聚合 selected 选项。然后你将该输入发送到某个 ajax 或其他函数以获取代码，然后将其添加到另一个 multi select 中。有很多方法可以完成所有这些，这里是其中之一。我在你的 post 上没有看到 jQuery 标签，所以这都是 vanillaJS，但如果需要，可以轻松转移到 jQuery。

window.addEventListener('DOMContentLoaded', () => {
  let hprops = document.querySelector('#hp_codes')
  document.querySelector('#hazards').addEventListener('change', e => {
    let options = e.target.options;
    let hazards = [];
    for (var i = 0, l = options.length; i < l; i++) {
      if (options[i].selected) {
        hazards.push(options[i].value);
      }
    }

    hprops.innerHTML = '';
    hprops.setAttribute('disabled', true); // disable until we get the data in there
    // ajax to get actual data ...
    let results = []
    if (hazards.includes('1')) results.push('AAA')
    if (hazards.includes('2')) results.push('BBB')
    if (hazards.includes('3')) results.push('CCC')

    results.forEach(r => hprops.innerHTML += `<option value='${r}'>${r}</option?`)
    hprops.removeAttribute('disabled');

  })
})

<div class="form-group">
  <select id="hazards" name="hazards[]" class="form-control" multiple="multiple" required>
    <option value='1'>Oil slick</option>
    <option value='2'>Moose crossing</option>
    <option value='3'>Pothole</option>
  </select>
</div>

<div class="form-group">

  <label>Hazard Properties: <span class="text-danger">*</span></label><br>

  <!-- Build your select: -->
  <select id="hp_codes" name="hp_codes[]" class="form-control" multiple="multiple" required>

  </select>

Bootstrap 多选 - 从第一个多选中过滤出第二个多选

Bootstrap multiselect - filtering a second multiselect from the first

html

javascript

php

forms

bootstrap-4