添加<option>到<select>带有 JavaScript 的菜单

Question

我遇到了这个问题，可以使用一些帮助。 我创建了两个<select>下拉列表。 第一个是用户可以选择的报告列表，第二个是保单编号列表。

HTML

<select name="selectReport" id="selectReport" onchange="ResetDefaultReportOptions()">
  <option value="Make a Selection">Make a Selection</option>
  <option value="All Reports">All Reports</option>
  <option value="Completed Reports">Completed Reports</option>
  <option value="Missing Reports">Missing Reports</option>
  <option value="Closed Reports">Closed Reports</option>
</select>

<select name="selectPolicy" id="selectPolicy">
    <option value="Make a Selection">Make a Selection</option>
    <option value="0123456-001">0123456-001</option>
    <option value="0123456-002">0123456-002</option>
    <option value="0123456-003">0123456-003</option>
    <option value="0123456-004">0123456-004</option>
    <option value="0123456-005">0123456-005</option>
 </select>

我想要做的是在<option>特定报告时将<option>添加到策略列表中。 如果我从报告列表中选择“所有报告”或“已完成的报告”，我想插入“所有策略”作为策略列表中的第二项。 如果选择了其他报告之一，我还想删除“所有政策”。

JavaScript

function ResetDefaultReportOptions() {
  var report = document.getElementById('selectReport').value;
  var policy = document.getElementById('selectPolicy');

  if (report != 'Make a Selection' ||
     report != 'All Reports' ||
     report != 'Completed Reports') {
    policy.options[1].text = 'All policies';
    policy.options[1].value = 'All policies';
  }
}

这是一个小提琴。 显然我做错了什么，所以任何帮助表示赞赏。

Answer 1

 function ResetDefaultReportOptions() { var report = document.getElementById('selectReport').value; var policy = document.getElementById('selectPolicy'); if (report == 'All Reports' || report == 'Completed Reports') { if(policy.options.item(1).value != 'All policies'){ o = document.createElement('option'); o.text = 'All policies'; o.value = 'All policies'; policy.options.add(o,1); } } else{ if(policy.options.item(1).value == 'All policies'){ policy.options.remove(1); } } } document.getElementById('selectReport').onchange = function(){ ResetDefaultReportOptions(); }

 select { font-size: 1em; padding: 4px; border-radius: 3px; }

 <select name="selectReport" id="selectReport"> <option value="Make a Selection">Make a Selection</option> <option value="All Reports">All Reports</option> <option value="Completed Reports">Completed Reports</option> <option value="Missing Reports">Missing Reports</option> <option value="Closed Reports">Closed Reports</option> </select> <select name="selectPolicy" id="selectPolicy"> <option value="Make a Selection">Make a Selection</option> <option value="0123456-001">0123456-001</option> <option value="0123456-002">0123456-002</option> <option value="0123456-003">0123456-003</option> <option value="0123456-004">0123456-004</option> <option value="0123456-005">0123456-005</option> </select>