Add icon to multi select dropdown (#7803)
* Add down arrow icon to multi select dropdown * Update template.php
This commit is contained in:
@@ -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";
|
||||
|
||||
@@ -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}')">×</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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user