Файловый менеджер

Файловый менеджер - Редактировать - /home/clickysoft/public_html/somni.clickysoft.net/public/html/custom-select.html

Назад
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .custom-select { position: relative; display: inline-block; margin: 10px; } .select-wrapper { position: relative; cursor: pointer; } .select-selected { background-color: #f1f1f1; padding: 10px; border-radius: 4px; width: 200px; position: relative; z-index: 1; display: flex; justify-content: space-between; } .select-arrow { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #333; /* Arrow color / position: absolute; top: 50%; right: 10px; transform: translateY(-50%); z-index: 1; } .select-options { display: none; position: absolute; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; top: 100%; left: 0; width: 100%; z-index: 2; } .select-option { padding: 10px; cursor: pointer; } .select-option:hover { background-color: #ddd; } </style> </head> <body> <div class="custom-select" data-multiple="false"> <div class="select-wrapper"> <div class="select-selected">Select an option</div> <div class="select-arrow"></div> <div class="select-options"> <div class="select-option" data-value="Option 1">Option 1</div> <div class="select-option" data-value="Option 2">Option 2</div> <div class="select-option" data-value="Option 3">Option 3</div> </div> </div> </div> <div class="custom-select" data-multiple="false"> <div class="select-wrapper"> <div class="select-selected">Select an option</div> <div class="select-arrow"></div> <div class="select-options"> <div class="select-option" data-value="Apple">Apple</div> <div class="select-option" data-value="Orange">Orange</div> <div class="select-option" data-value="Banana">Banana</div> </div> </div> </div> <div class="custom-select" data-multiple="true"> <div class="select-wrapper"> <div class="select-selected">Select an option</div> <div class="select-arrow"></div> <div class="select-options"> <div class="select-option" data-value="Swimming Pool"> <input type="radio" name="amenities" value=""> Swimming Pool </div> <div class="select-option" data-value="Gym"><input type="radio" name="amenities" value="">Gym</div> <div class="select-option" data-value="Spa"> <input type="radio" name="amenities" value="">Spa</div> </div> </div> </div> <div class="login-fields"> <label for="datePicks2">Another Rent Due Date<span></span></label> <div class="customDate"> <div class="choose-date">Choose Date</div> <input placeholder="Choose Date" class="textbox-n date-picker" type="date" id="datePicks2" /> <div class="icon"><img src="./images/mini-date.svg" alt="" class="img-fluid"></div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> // $(document).ready(function () { // $(".custom-select select").each(function () { // const select = $(this); // const selected = $("<div class='select-selected'></div>"); // const options = $("<div class='select-options'></div>"); // select.find("option").each(function () { // const optionText = $(this).text(); // const option = $("<div class='select-option'></div>").text(optionText); // option.on("click", function () { // selected.text(optionText); // options.hide(); // select.val(optionText); // }); // options.append(option); // }); // selected.text(select.val()); // selected.on("click", function (e) { // e.stopPropagation(); // options.toggle(); // }); // $(document).on("click", function () { // options.hide(); // }); // select.after(selected).after(options); // }); // }); // $(document).ready(function () { // $(".custom-select .select-wrapper").each(function () { // const $wrapper = $(this); // const $select = $wrapper.find("select"); // const $arrow = $wrapper.find(".arrow"); // $select.on("change", function () { // $arrow.removeClass("open"); // }); // $wrapper.on("click", function (e) { // e.stopPropagation(); // $select.focus().click(); // $arrow.addClass("open"); // }); // }); // // Close the dropdown when clicking outside // $(document).on("click", function () { // $(".custom-select .arrow").removeClass("open"); // }); // // Prevent clicks inside the dropdown from closing it // $(".custom-select .select-options").on("click", function (e) { // e.stopPropagation(); // }); // }); $(document).ready(function () { // Function to handle opening and closing of select options function toggleSelectOptions($customSelect) { const $options = $customSelect.find(".select-options"); // Close all other select options except the current one $(".custom-select").not($customSelect).find(".select-options").slideUp(); if (!$options.is(":animated")) { $options.slideToggle(); } } // Handle click on select items $(document).on("click", ".select-option, .select-selected, .select-arrow", function (e) { e.stopPropagation(); const $customSelect = $(this).closest(".custom-select"); toggleSelectOptions($customSelect); }); // Handle selection logic $(document).on("click", ".select-option", function () { const $option = $(this); const $customSelect = $option.closest(".custom-select"); const isRadio = $customSelect.data("radio"); const $selected = $customSelect.find(".select-selected"); const selectedValue = $option.data("value"); if (isRadio) { $selected.text(selectedValue); $customSelect.find(".select-options").slideUp(); console.log("Selected Amenity:", selectedValue); } else { $option.toggleClass("selected"); const selectedOptions = $customSelect .find(".select-option.selected") .map(function () { return $(this).data("value"); }) .get(); $selected.text(selectedOptions.join(", ")); console.log("Selected Value(s):", selectedOptions); } }); // Close the dropdowns when clicking outside $(document).on("click", function () { $(".select-options").slideUp(); }); // Prevent clicks inside the dropdown from closing it $(document).on("click", ".select-options", function (e) { e.stopPropagation(); }); }); </script> </body> </html>

| ver. 1.4 | Github | . | PHP 8.1.29 | Генерация страницы: 0 | proxy | phpinfo | Настройка