Как задать текст по умолчанию для select через чистый JS

Рейтинг: 0Ответов: 2Опубликовано: 10.03.2023

У меня есть HTML код select:

<select class="selectpicker" id="select-category-parent_id" data-live-search="true" data-width="100%" name="parent_id">
<option style="display: none;" value="">
Выберите число пж
</option>
<option data-subtext="1">Раз</option>
<option data-subtext="2">Два</option>
 <option data-subtext="3">Три</option>                                           
 </select>

Как при нажатии кнопки сбросить значение select чтобы по итогу отобразился текст: "Выберите число пж". Важно, что значение будет передаваться на сервер поэтому value=0 не подойдёт.

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Чтобы передавать значения на сервер, обычно пользуются value а не дата-аттрибутами поэтому я дописал value в каждую опцию. Для того чтобы сбросить select (мне кажется удобным расположить кнопку сброса рядом), следовательно к селекту можно будет обратиться так this.previousElementSibling это очень удобно если таких полей будет много. При желании всю эту разметку можно генерировать из js.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<select class="selectpicker" id="select-category-parent_id" data-live-search="true" data-width="100%" name="parent_id">
    <option value="">Выберите число пж</option>
    <option value="1" data-subtext="1">Раз</option>
    <option value="2" data-subtext="2">Два</option>
    <option value="3" data-subtext="3">Три</option>                                          
</select>
<button class="btn-primary" id="reset">❌</button>
<br>
<select class="selectpicker" id="select-category-parent_id_next" data-live-search="true" data-width="100%" name="parent_id">
    <option value="">Выберите число пж</option>
    <option value="4" data-subtext="4">Четыре</option>
    <option value="5" data-subtext="5">Пять</option>
    <option value="6" data-subtext="6">Шесть</option>                                          
</select>
<button class="btn-secondary" id="reset">❌</button>

▲ 0

Почему value="0" не подойдет и причем тут сервер?

const btn = document.querySelector('button')

btn.addEventListener('click', () => {
    const select = document.querySelector('select')

    select.value = '0'
})
<select class="selectpicker" id="select-category-parent_id" data-live-search="true" data-width="100%" name="parent_id">
    <option value="0">Выберите число пж</option>
    <option data-subtext="1">Раз</option>
    <option data-subtext="2">Два</option>
    <option data-subtext="3">Три</option>                                          
</select>
<br><br>
<button>reset</button>