我目前在一個頁面上有 2 個多選下拉選單，一個名為“危害”，另一個名為“hp_codes”。他們都從 SQL DB 填充他們的串列，想法是“hp_codes”將根據在“hazards”中選擇的內容進行填充。
因此，理論上有人可以選擇 hazard1、hazard2 和 hazard3，然后第二個串列將生成與這 3 個危害相關的選項（有些選項可能相同 - 重復項將被洗掉）。
我對此有點陌生，因此拋出了一個網，所以我非常感謝任何建議。
到目前為止，我已經嘗試了關于這個問題的解決方案（基于第一個下拉串列的 Bootstrap 多選動態選項）無濟于事（我輸入了所有選項以阻止頁面從資料庫中提取 hp_codes。能夠保留這些從維護頁面的角度來看，從數??據庫中提取對于將來的更新非常有幫助。
實作這一目標的最佳方法是什么？
編輯 這是我表單中當前內容的片段。將資料從資料庫中拉入多選
// 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>
最后將多選放在表單中
<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>
uj5u.com熱心網友回復：
首先，您需要change在初始選擇上有一個處理程式。然后您需要通過回圈聚合選定的選項。然后將該輸入發送到某個 ajax 或其他函式以獲取代碼，然后將其添加到其他多選中。有很多方法可以完成所有這些，這里是其中之一。我在你的帖子上沒有看到 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/392864.html
標籤：javascript php html 形式 bootstrap-4
上一篇：條件表單輸入-顯示/隱藏多個欄位