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

Question

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

我曾尝试将 placeholder='' 添加到 <select> 标签，但这根本不起作用。我也尝试使用 javascript 添加 <option> 但这也被覆盖了。

Javascript

它的作用：我过滤了三个字段。第一个函数根据第一个 selection 过滤中间字段。第二个函数根据第二个中的 selection 过滤第三个字段。此功能有效，但问题在于 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>

目前，这些字段是自动填充的，因为没有占位符，所以每个字段自然会有一个 selection。理想情况下，它应该显示带有占位符的字段，允许用户一次 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

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

optionHTML and innerHTML overwriting `<option>` placeholder

html

javascript

jquery

dynamic

jquery-select2

Javascript

HTML 字段