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

时间:2015-06-21 19:40:34

标签: javascript html drop-down-menu

我对此有疑问,可以使用一些帮助。我创建了两个&lt; select&gt;下拉列表。第一个是用户可以选择的报告列表,第二个是策略号列表。 HTML &lt; select name =&#34; selectReport&#34; ID =&#34; selectReport&#34;平变化=&#34; ResetDefaultReportOptions()&#34;&GT;   &lt; option value =&#34;进行选择&#34;&gt;进行选择&lt; / option&gt;   &lt; option value =&#34;所有报告&#34;&gt;所有报告&lt; /选项&gt;   &lt; option value =&#34;已完成报告&#34;&gt;已完成报告&lt; /选项&gt;   &lt; option value =&#34;缺少报告&#34;&gt;缺少报告&lt; /选项&gt;   &lt; option value =&#34;已关闭的报告&#34;&gt;已关闭的报告&lt; /选项&gt; &LT; /选择&GT; &lt; select name =&#34; selectPolicy&#34; ID =&#34; selectPolicy&#34;&GT;     &lt; option value =&#34;进行选择&#34;&gt;进行选择&lt; / option&gt;     &lt; option value =&#34; 0123456-001&#34;&gt; 0123456-001&lt; / option&gt;     &lt; option value =&#34; 0123456-002&#34;&gt; 0123456-002&lt; / option&gt;     &lt; option value =&#34; 0123456-003&#34;&gt; 0123456-003&lt; / option&gt;     &lt; option value =&#34; 0123456-004&#34;&gt; 0123456-004&lt; / option&gt;     &lt; option value =&#34; 0123456-005&#34;&gt; 0123456-005&lt; / option&gt;  &LT; /选择&GT; 我想要做的是添加&lt;选项&gt;选择特定报告时的策略列表。如果我选择&#34;所有报告&#34;或者&#34;完成报告&#34;从报告列表中我想插入&#34;所有政策&#34;作为策略列表中的第二项。我还要删除&#34;所有政策&#34;如果选择了其他报告之一。 JavaScript的 function ResetDefaultReportOptions(){   var report = document.getElementById(&#39; selectReport&#39;)。value;   var policy = document.getElementById(&#39; selectPolicy&#39;);   if(报告!=&#39;进行选择&#39; ||      报告!=&#39;所有报告&#39; ||      报告!=&#39;已完成的报告&#39;){     policy.options [1] .text =&#39;所有政策&#39 ;;     policy.options [1] .value =&#39;所有政策&#39 ;;   } } 这是一个小提琴。显然,我做错了什么,所以任何帮助都会受到赞赏。

1 个答案:

答案 0 :(得分: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>