从下拉菜单中删除带有特定文本的选项

Question

在我的 Django 应用程序中（使用 {% load crispy_forms_tags %}）我有以下下拉菜单：

<div id="div_id_report_division" class="form-group">
<label for="id_report_division" class=" requiredField">Test<span class="asteriskField"></span</label>
<div class="">
<select name="report_division" class="select form-control" required="" id="id_report_division">
  <option value="" selected="">---------</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select> </div> </div>

我想删除页面加载时的第 5 个选项。我的 Javascript 在 post.html 上的所有内容是：

     <script type="text/javascript">
         function on_load(){
            /*
            option 1.:
            document.querySelector('id_report_division option[value=5]').remove();
            option 2.:
            var x = document.getElementById('id_report_division');
            x.remove(5);
            option 3.:
            document.querySelector('#id_report_division option[value=5]').remove();
            const first = document.querySelector("[id='id_report_division']");
            */

            document.querySelector("[id='id_report_division' option[value=5]]").remove();

            }
         on_load();
    </script>

如何轻松删除此选项？如果我可以删除文本为 E 的选项会更好，以防值发生变化。但永远只有一个文本'E'，无需重复

Answer 1

您可以迭代 select 选项列表，检查内部文本并像这样删除：

var selectobject = document.getElementById("id_report_division");
for (var i=0; i<selectobject.length; i++) {
    if (selectobject.options[i].text == 'E')
        selectobject.remove(i);
}

从下拉菜单中删除带有特定文本的选项

Remove option with certain text from dropdown menu

javascript

html

django

dropdown