Add icon to multi select dropdown (#7803)

* Add down arrow icon to multi select dropdown

* Update template.php
This commit is contained in:
Alex
2026-03-20 23:01:17 +00:00
committed by GitHub
parent eb622a3fd0
commit 6c648b6bb1
2 changed files with 30 additions and 29 deletions
+1 -1
View File
@@ -187,7 +187,7 @@
echo " <div id='no_results' class='no_results'>".$text['label-no_results']."</div>\n";
echo " <div class='options_list' id='options_list'>\n";
echo " <div class='options_list' id='options_list' name='extension_uuids[]'>\n";
if (is_array($extensions) && @sizeof($extensions) != 0) {
foreach ($extensions as $row) {
echo " <label class='option_item' data-value='".escape($row['extension'])."'>\n";
+8 -7
View File
@@ -743,6 +743,7 @@
const dropdown_list = container.querySelector('.dropdown_list');
const search_input = container.querySelector('.search_box');
const options_list = container.querySelector('.options_list');
const input_name = options_list.getAttribute('name');
const no_results = container.querySelector('#no_results');
const placeholder = container.querySelector('.placeholder_text');
let is_open = false;
@@ -805,7 +806,7 @@
// If unchecked, remove the corresponding hidden input
if (!event.target.checked) {
const value = event.target.value;
const hidden_input = document.querySelector(`input[name="extension_uuids[]"][value="${value}"]`);
const hidden_input = document.querySelector(`input[name="${input_name}"][value="${value}"]`);
if (hidden_input) {
hidden_input.remove();
}
@@ -836,6 +837,7 @@
if (selected_count === 0) {
placeholder.style.display = 'block';
trigger_btn.innerHTML = `<span class="placeholder_text">{/literal}{$text.label_select}{literal}...</span>`;
trigger_btn.innerHTML += `<i class='fa-solid fa-angle-down' style='position: absolute; right: 6px; transform: scale(0.70, 0.75);'></i>`;
}
else {
placeholder.style.display = 'none';
@@ -843,13 +845,12 @@
checked_boxes.forEach(box => {
const label = box.parentElement.innerText;
const clean_label = box.parentElement.textContent.trim();
// Create a hidden input for each selected tag
create_hidden_input_for_tag(clean_label, box.value);
create_hidden_input_for_tag(label, box.value);
html += `<span class="tag" data-value="${box.value}">`;
html += ` ${clean_label}`;
html += ` ${label}`;
html += ` <span onclick="remove_option('${box.value}')">&times;</span>`;
html += `</span>`;
});
@@ -865,7 +866,7 @@
checkbox.checked = false;
// Remove the hidden input corresponding to this tag
const hidden_input = document.querySelector(`input[name="extension_uuids[]"][value="${value}"]`);
const hidden_input = document.querySelector(`input[name="${input_name}"][value="${value}"]`);
if (hidden_input) {
hidden_input.remove();
}
@@ -876,11 +877,11 @@
// Function to create a hidden input for each selected tag
function create_hidden_input_for_tag(label, value) {
const existing_hidden_input = document.querySelector(`input[name="extension_uuids[]"][value="${value}"]`);
const existing_hidden_input = document.querySelector(`input[name="${input_name}"][value="${value}"]`);
if (!existing_hidden_input) {
const hidden_input = document.createElement('input');
hidden_input.type = 'hidden';
hidden_input.name = 'extension_uuids[]';
hidden_input.name = input_name;
hidden_input.value = value;
container.appendChild(hidden_input);
}