Я пытаюсь добавить заполнитель в мои поля динамического выбора. Проблема заключается в том, что мой javascript, который добавляет динамические параметры на основе выбора в предыдущем поле, перезаписывает первый тег <option>, используемый для установки заполнителя. Каждый прочитанный мной учебник (включая документацию по select2 и w3schools) добавляет заполнитель через пустой тег <option>.
Я пытался добавить placeholder='' к тегу <select>, но это просто ничего не делает. Я также попытался добавить <option> с использованием javascript, но это также было перезаписано.
1010 * Javascript *
Что это делает: у меня есть три поля, которые фильтруются. Первая функция фильтрует среднее поле на основе выбора в первом. Вторая функция фильтрует третье поле на основе выбора во втором. Эта функция работает, но проблема заключается в использовании optionHTML и innerHTML.
// filter 'display' select2 fields
$(document).ready(function(){
let college_select = document.getElementById('colleges');
let building_select = document.getElementById('buildings');
college_select.onchange = function() {
$(building_select).empty();
college = college_select.value;
fetch('/building/' + college).then(function(response) {
response.json().then(function(data) {
let optionHTML = '';
for (let building of data.buildings) {
optionHTML += '<option value="' + building.id + '">' + building.name + '</option>'
}
console.log(optionHTML);
building_select.innerHTML = optionHTML;
$(building_select).trigger('change');
});
});
}
});
// filter 'display' select2 fields
$(document).ready(function(){
let building_select = document.getElementById('buildings');
let room_select = document.getElementById('rooms');
building_select.onchange = function() {
$(room_select).empty();
building = building_select.value;
fetch('/room/' + building).then(function(response) {
response.json().then(function(data) {
let optionHTML = '';
for (let room of data.rooms) {
optionHTML += '<option value="' + room.id + '">' + room.room_number + '</option>'
}
console.log(optionHTML);
room_select.innerHTML = optionHTML;
});
});
}
});
поля HTML
извините за форматирование
<select class="single-select" id="colleges" name="colleges">
{% for college in colleges %}
<option data-filterkey="{{ college.id }}" value="{{ college.id }}">{{ college.name }}</option>
{% endfor %}
</select>
<select class="single-select" id="buildings" name="buildings">
{% for building in buildings %}
<option data-filterkey="{{ building.college_id }}" value="{{ building.id }}">{{ building.name }}</option>
{% endfor %}
</select>
<select class="single-select" id="rooms" name="rooms">
{% for room in rooms %}
<option data-filterkey="{{ room.building.college_id }}" value="{{ room.id }}">{{ room.room_number }}</option>
{% endfor %}
</select>
В настоящее время поля заполняются автоматически, потому что нет заполнителя, поэтому, естественно, в каждом есть выбор. В идеале, он должен отображать поля с заполнителями, позволяющими пользователю выбирать одно поле за раз, чтобы получить желаемый результат. (как видно выше)
У меня просто нет идей, так что спасибо за помощь!