@gesshoku

Как на JS написать метод, который ищет елементы с тегом select, скрывает их и вместо них ставит мой кастомный select?

Стандартный select -
<select id="select-standart">
                                <option value="value1"> option 11 </option>
                                <option value="value2"> option 22 </option>
                                <option value="value3"> option 33 </option>
                                <option value="value4"> option 44 </option>
                                <option value="value5"> option 55 </option>
                         </select>


На кастомном select стоит display: none; -
<div class="dropdown">
                                <button class="dropdown__button" type="button"> Practice / Institution* </button>
                                <ul class="dropdown__list">
                                    <li class="dropdown__list-item"> option1 </li>
                                    <li class="dropdown__list-item"> option2 </li>
                                    <li class="dropdown__list-item"> option3 </li>
                                    <li class="dropdown__list-item"> option4 </li>
                                    <li class="dropdown__list-item"> option5 </li>
                                </ul>
                </div>


html - страница -
<form class="tasks__request">
                    <div class="input_name tusks__item">
                        <input type="text" placeholder="Full Name*">
                    </div>

                    <div class="input_position tusks__item">
                        <input type="text" placeholder="Title/Position*">
                    </div>

                    <div class="select_institution tusks__item">
                        <div class="select-items">
                            <select id="select-standart">
                                <option value="value1"> option 11 </option>
                                <option value="value2"> option 22 </option>
                                <option value="value3"> option 33 </option>
                                <option value="value4"> option 44 </option>
                                <option value="value5"> option 55 </option>
                            </select>
                            
                            <div class="dropdown">
                                <button class="dropdown__button" type="button"> Practice / Institution* </button>
                                <ul class="dropdown__list">
                                    <li class="dropdown__list-item"> option1 </li>
                                    <li class="dropdown__list-item"> option2 </li>
                                    <li class="dropdown__list-item"> option3 </li>
                                    <li class="dropdown__list-item"> option4 </li>
                                    <li class="dropdown__list-item"> option5 </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="input_email tusks__item">
                        <input type="text" placeholder="Email Address*">
                    </div>

                    <div class="input_phone tusks__item">
                        <input type="text" placeholder="Phone Number*">
                    </div>

                    <div class="input_profession tusks__item">
                        <div class="select-items">
                            <select id="select-standart">
                                <option value="value1"> option 11 </option>
                                <option value="value2"> option 22 </option>
                                <option value="value3"> option 33 </option>
                                <option value="value4"> option 44 </option>
                                <option value="value5"> option 55 </option>
                            </select>
                            
                            <div class="dropdown">
                                <button class="dropdown__button" type="button"> Practice / Institution* </button>
                                <ul class="dropdown__list">
                                    <li class="dropdown__list-item"> option1 </li>
                                    <li class="dropdown__list-item"> option2 </li>
                                    <li class="dropdown__list-item"> option3 </li>
                                    <li class="dropdown__list-item"> option4 </li>
                                    <li class="dropdown__list-item"> option5 </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="input_inquiry tusks__item">
                        <div class="select-items">
                            <select id="select-standart">
                                <option value="value1"> option 11 </option>
                                <option value="value2"> option 22 </option>
                                <option value="value3"> option 33 </option>
                                <option value="value4"> option 44 </option>
                                <option value="value5"> option 55 </option>
                            </select>
                            
                            <div class="dropdown">
                                <button class="dropdown__button" type="button"> Practice / Institution* </button>
                                <ul class="dropdown__list">
                                    <li class="dropdown__list-item"> option1 </li>
                                    <li class="dropdown__list-item"> option2 </li>
                                    <li class="dropdown__list-item"> option3 </li>
                                    <li class="dropdown__list-item"> option4 </li>
                                    <li class="dropdown__list-item"> option5 </li>
                                </ul>
                            </div>
                        </div>+
                    </div>

                    <div class="input_message tusks__item">
                        <textarea name="message" placeholder="Enter Message*"></textarea>
                    </div>
                </form>


JS - КОД
//Скрыть стандартный select(select-standart) и показать кастомный select(dropdown)
document.querySelectorAll('.select-items').forEach(function (){                    //.select-items - блоки в которых находятся стандартный и кастомный select
    document.querySelector('select-standart').classList.add('.box-none');         //select-standart - id стандартных тегов select
    document.querySelector('.dropdown').classList.add('.box-block');              //dropdown - кастомный select
});



//Функционал кастомных select
document.querySelectorAll('.dropdown').forEach(function (dropDownWrapper){

    const dropDownBtn = dropDownWrapper.querySelector('.dropdown__button');
    const dropDownList = dropDownWrapper.querySelector('.dropdown__list');
    const dropDownListItems = dropDownList.querySelectorAll('.dropdown__list-item');


    //Клик по кнопке. Окрыть, закрыть
    dropDownBtn.addEventListener('click', function (){
        dropDownList.classList.toggle('box-block');
    });


    //Выбор елемента списка. Запомнить выбранное значение, закрыть дропдаун
    dropDownListItems.forEach(function (listItem){
        listItem.addEventListener('click', function (){
            dropDownBtn.innerText = this.innerText;
            dropDownList.classList.remove('box-block');
        })
    });


    //Клик снаружи дропдауна. Закрыть дропдаун
    document.addEventListener('click', function(e){
        if (e.target !== dropDownBtn) {
            dropDownList.classList.remove('box-block');
        }
    });

});


Стандартный и кастомный селект работает отлично, подскажите, пожалуйста, как изменить мой js-код чтоб скрыть стандартный селект и вместо него поставить свойю. Я новичок в этом деле
  • Вопрос задан
  • 112 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы