使用 JavaScript 将 <option> 添加到 <select> 菜单

Question

我对此有疑问，需要一些帮助。我创建了两个 <select> 下拉列表。第一个是用户可以报告的列表 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>

我想做的是在 selected 特定报告时将 <option> 添加到策略列表。如果我从报告列表中 select "All Reports" 或 "Completed Reports" 我想插入 "All policies" 作为策略列表中的第二项。如果其他报告之一是 selected，我还想删除 "All policies"。

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';
  }
}

这是一个 fiddle。显然我做错了什么，所以感谢您的帮助。

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>

使用 JavaScript 将 <option> 添加到 <select> 菜单

Adding <option> to a <select> menu with JavaScript

html

javascript

drop-down-menu