optionHTML和innerHTML覆盖`<option>`占位符

Question

我试图在我的动态选择字段中添加一个占位符。问题是我的基于上一个字段的选择添加动态选项的javascript覆盖了用于设置占位符的第一个<option>标签。我阅读的每个教程（包括select2文档和w3schools）都通过空白的<option>标签添加占位符。

我尝试将placeholder=''添加到<select>标记中，但这根本无济于事。我也尝试过使用JavaScript添加<option>，但这也被覆盖了。

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>

当前，由于没有占位符，因此会自动填充字段，因此很自然每个字段中都有一个选择。理想情况下，它应该显示带有占位符的字段，允许用户一次选择一个字段以获得所需的结果。 （如上所示）

我只是没有主意，所以谢谢您的帮助！

Answer 1

我没有您的数据，我只是整理了一些数据。在演示中，您可以在保留占位符的同时更改选择选项。

var alphabet = ['A', 'B', 'C', 'D', 'E'];

var numeric = [0, 1, 2, 3, 4];

$(document).ready(function() {
  $('#first-select').on('change', function(e) {

    var selectedType = $(e.target).val();
    $('#second-select .option-placeholder').html('select a ' + selectedType);

    var data = (selectedType === 'alphabet') ? alphabet : numeric;
    // remove option except the placeholder
    $('#second-select .option-value').remove();
    var secondselect = $('#second-select').first();
    // reset selection
    secondselect.prop('selectedIndex', 0);
    // add option to the second list
    data.forEach(function(e) {
      secondselect.append($(
        '<option>', {
          'class': 'option-value',
          text: e,
          value: e
        }));
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="first-select">
  <option disabled selected>select a type</option>
  <option value="alphabet">Alphabet</option>
  <option value="number">Number</option>
</select>

<select id="second-select">
  <option class="option-placeholder" disabled selected>select a ...</option>
</select>

Answer 2

因此，如果您通过相同的问题和相似的代码进行查找，则可以使用我的占位符。使用@Mr。 Brickowski的答案并添加了这个内容，

optionHTML += '<option class="option-placeholder" disabled="" selected="">room..</option>';

在动态创建的<option>创建占位符所需的正确<option>之前。

查看具有突出显示的更改here的代码段