| Tôi hiện có 2 lần thả xuống đa lựa chọn trên một trang, một cái được gọi là 'Hazards' và 'HP_Codes' khác. Cả hai đều đưa ra danh sách của họ từ SQL DB và ý tưởng là 'HP_Codes' sẽ được đưa ra dựa trên những gì được chọn trong 'mối nguy hiểm' Nội dung chính Hiển thị - Bootstrap Multiselect - Ví dụ miễn phí, Mẫu & Hướng dẫn
- ví dụ cơ bản
- Multisective with label
- Multisective with the place
- Nhiều lựa chọn bị vô hiệu hóa
- Tùy chọn vô hiệu hóa
- Unknown node
- Nội dung tùy chỉnh
- Các tùy chọn có thể nhìn thấy
- Văn bản thứ cấp
- Tìm kiếm
- Select with side search in a method
- Nhóm tùy chọn
- Đa nhiệm với các biểu tượng
- Judgement
Nội dung chính Hiển thị Hiển thị - Bootstrap Multiselect - Ví dụ miễn phí, Mẫu & Hướng dẫn
- ví dụ cơ bản
- Multisective with label
- Multisective with the place
- Nhiều lựa chọn bị vô hiệu hóa
- Tùy chọn vô hiệu hóa
- Unknown node
- Nội dung tùy chỉnh
- Các tùy chọn có thể nhìn thấy
- Văn bản thứ cấp
- Tìm kiếm
- Select with side search in a method
- Nhóm tùy chọn
- Đa nhiệm với các biểu tượng
- Judgement
Vì vậy, theo lý thuyết, ai đó có thể chọn Hazard1, Hazard2 và Hazard3 và sau đó danh sách thứ hai sẽ tạo ra các tùy chọn liên quan đến 3 Hazard đó (một số tùy chọn có thể giống nhau - bản sao được Tôi hiện có 2 lần thả xuống đa lựa chọn trên một trang, một cái được gọi là 'Hazards' và 'HP_Codes' khác. Cả hai đều đưa ra danh sách của họ từ SQL DB và ý tưởng là 'HP_Codes' sẽ được đưa ra dựa trên những gì được chọn trong 'mối nguy hiểm' Nội dung chính Hiển thị - Bootstrap Multiselect - Ví dụ miễn phí, Mẫu & Hướng dẫn
- ví dụ cơ bản
- Multisective with label
- Multisective with the place
- Nhiều lựa chọn bị vô hiệu hóa
- Tùy chọn vô hiệu hóa
- Unknown node
- Nội dung tùy chỉnh
- Các tùy chọn có thể nhìn thấy
- Văn bản thứ cấp
- Tìm kiếm
- Select with side search in a method
- Nhóm tùy chọn
- Đa nhiệm với các biểu tượng
- Judgement
Vì vậy, theo lý thuyết, ai đó có thể chọn Hazard1, Hazard2 và Hazard3 và sau đó danh sách thứ hai sẽ tạo ra các tùy chọn liên quan đến 3 Hazard đó (một số tùy chọn có thể giống nhau - bản sao được Tôi là một người mới về điều này, hãy ném một mạng, vì vậy bất kỳ đề xuất nào của tôi đều được đánh giá cao Cho đến nay, tôi đã thử giải pháp cho câu hỏi này (Tùy chọn Bootstrap MultiSelect dựa trên việc thả xuống đầu tiên) nhưng tôi đã nhập tất cả các tùy chọn để dừng trang Rút HP_Codes từ DB. Có khả năng duy trì việc Rút ra khỏi DB sẽ thực sự hữu ích cho các bản cập nhật mới trong tương lai từ quan điểm trang bảo trì Điều gì sẽ là cách tốt nhất để đạt được điều này? Chỉnh sửa ở đây là một đoạn của những gì hiện đang có trong khuôn mẫu của tôi. Để kéo dữ liệu vào MultiSelect từ DB Đây là một đoạn trích về những gì hiện có trong biểu mẫu của tôi. Để kéo dữ liệu vào đa lựa chọn từ DB // 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;
?>
Sau đó để khởi động plugin <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>
và cuối cùng để đặt mutliselect trong biểu mẫu <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>
Bootstrap Multiselect - Ví dụ miễn phí, Mẫu & Hướng dẫnĐáp ứng phản hồi đa năng được xây dựng với bootstrap 5. Ví dụ về thả xuống đa lựa chọn với hộp kiểm, hộp, tìm kiếm, nút, nhóm, biểu tượng, xác thực, vô hiệu hóa Không giống như một lựa chọn tiêu chuẩn, MultiSelect cho phép người dùng chọn nhiều tùy chọn cùng một lúc Lưu ý. Để tìm hiểu thêm về chọn thành phần chọn và xem tất cả các tùy chọn, phương thức, sự kiện và cách sử dụng nâng cao có sẵn - đọc phần chọn tài liệu & API Để tìm hiểu thêm về Chọn thành phần và xem tất cả các tùy chọn có sẵn,
ví dụ cơ bảnThêm thuộc tính <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>
8 vào tùy chọn phần tử để kích hoạt nhiều chế độLưu ý. Thành phần này yêu cầu gói MDBootStrap Pro. Thành phần này yêu cầu gói MDBootstrap Pro
Multisective with labelCó thể thêm nhãn Chọn bằng cách tạo phần tử với các lớp ____ 4> và ____ 5>
Multisective with the placeSử dụng tùy chọn <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>
9 to set the place to select the start up. Người giữ chỗ sẽ được hiển thị khi bắt đầu vào tập tin trung tâm và không có tùy chọn nào được chọn
Nhiều lựa chọn bị vô hiệu hóaThêm thuộc tính <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>
0 vào mục lựa chọn để vô hiệu hóa đầu vào Chọn
Tùy chọn vô hiệu hóaSử dụng thuộc tính <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>
0 trên tùy chọn phần tử để vô hiệu hóa tùy chọn cụ thể
Unknown nodeSet option <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>
2 to <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>
0 to show the node for allow to delete the options select at
Nội dung tùy chỉnhMột thùng chứa tùy chỉnh nội dung có lớp <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>
1 sẽ được hiển thị ở cuối danh sách lựa chọn. Trong ví dụ này, chúng tôi đã thêm một nút
Các tùy chọn có thể nhìn thấySử dụng tùy chọn <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>
2 để thay đổi số lượng tùy chọn sẽ được hiển thị trong Xuống dưới Chọn mà không cần phải cuộn
Văn bản thứ cấpHọ <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>
3 Thuộc tính dữ liệu vào các tùy chọn cụ thể để hiển thị văn bản thứ cấp
Tìm kiếmSet option <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>
4 to <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>
0 to enable filter option
Select with side search in a methodDo craw lấy nét trong các phương thức, không thể tập trung các phần tử bên ngoài (như chọn thả xuống). Bạn có thể sử dụng tùy chọn Select |
