隐藏第二个<select>列表中的元素

时间:2015-05-07 01:58:38

标签: javascript html

在我的页面上,有两个下拉列表。我想要做的是如果在另一个列表中选择了镜像选项,则将元素隐藏在一个列表中。它几乎完全按照我现在想要的方式运行,除了它隐藏了自己列表中的元素而不是其他列表。 我尝试在最后两个if语句中切换变量,但这只是使选项永远消失。 我不知道什么是错的。 &#13; &#13; //隐藏元素在下拉列表1&#13; var option_to_hide1;&#13; //隐藏元素在下拉列表2&#13; var option_to_hide2;&#13; &#13; function option_hide(list){&#13;   //在下拉列表中抓住用户选择的团队&#13;   var team_selected = document.getElementById(&#34; team_compare&#34; + list).value;&#13; &#13;   //如果一个元素当前被隐藏,则取消隐藏它&#13;   if(typeof(option_to_hide1)!=&#34; undefined&#34;&amp;&amp; option_to_hide1!== null&amp;&amp; list == 2){&#13;     option_to_hide1.style.display =&#39; block&#39;;&#13;   } else if(typeof(option_to_hide2)!=&#34; undefined&#34;&amp;&amp; option_to_hide2!== null&amp;&amp; list == 1){&#13;     option_to_hide2.style.display =&#39; block&#39;;&#13;   }&#13;   //选择要隐藏的元素然后隐藏它&#13;   if(list == 1){&#13;     option_to_hide2 = document.getElementById(team_selected + list);&#13;     option_to_hide2.style.display =&#39; none&#39;;&#13;   }&#13;   if(list == 2){&#13;     option_to_hide1 = document.getElementById(team_selected + list);&#13;     option_to_hide1.style.display =&#39; none&#39;;&#13;   }&#13; }&#13; &lt; div id =&#34; compare_form&#34;&gt;&#13;   &lt; form action =&#34;&#34;&gt;&#13;     &lt; select name =&#34; team_compare1&#34; ID =&#34; team_compare1&#34;&GT;&#13;       &lt; option value =&#34;&#34;已选择已停用&gt;请选择一个团队...&lt; / option&gt;&#13;       &lt; option id =&#34; DP1&#34;值=&#34; DP&#34;的onclick =&#34; option_hide(1)&#34;&GT; DP&LT; /选项&GT;&#13;       &lt; option id =&#34; NiP1&#34;值=&#34; NiP的&#34;的onclick =&#34; option_hide(1)&#34;&GT; NiP的&LT; /选项&GT;&#13;       &lt; option id =&#34; Portugal1&#34;值=&#34;葡萄牙&#34;的onclick =&#34; option_hide(1)&#34;&GT;葡萄牙&LT; /选项&GT;&#13;       &lt; option id =&#34; Serbia1&#34;值=&#34;塞尔维亚&#34;的onclick =&#34; option_hide(1)&#34;&GT;塞尔维亚&LT; /选项&GT;&#13;       &lt; option id =&#34; VG1&#34;值=&#34; VG&#34;的onclick =&#34; option_hide(1)&#34;&GT; VG&LT; /选项&GT;&#13;     &LT; /选择&GT;&#13;     &lt; select name =&#34; team_compare2&#34; ID =&#34; team_compare2&#34;&GT;&#13;       &lt; option option value =&#34;&#34;已选择已停用&gt;请选择一个团队...&lt; / option&gt;&#13;       &lt; option id =&#34; DP2&#34;值=&#34; DP&#34;的onclick =&#34; option_hide(2)&#34;&GT; DP&LT; /选项&GT;&#13;       &lt; option id =&#34; NiP2&#34;值=&#34; NiP的&#34;的onclick =&#34; option_hide(2)&#34;&GT; NiP的&LT; /选项&GT;&#13;       &lt; option id =&#34; Portugal2&#34;值=&#34;葡萄牙&#34;的onclick =&#34; option_hide(2)&#34;&GT;葡萄牙&LT; /选项&GT;&#13;       &lt; option id =&#34; Serbia2&#34;值=&#34;塞尔维亚&#34;的onclick =&#34; option_hide(2)&#34;&GT;塞尔维亚&LT; /选项&GT;&#13;       &lt; option id =&#34; VG2&#34;值=&#34; VG&#34;的onclick =&#34; option_hide(2)&#34;&GT; VG&LT; /选项&GT;&#13;     &LT; /选择&GT;&#13;   &LT; /形式&GT;&#13; &LT; / DIV&GT;&#13; &#13; &#13; 这是一个JSFiddle,我的代码说明了这个问题。 https://jsfiddle.net/3dv89anj/

1 个答案:

答案 0 :(得分:3)

首先,您必须删除选项元素上的max。选项标记上的onclick="option_hide(1)"在其他浏览器上不seem to work。 而不是Onclickonclick代码上使用onchange

e.g。

select

问题是您在所选下拉列表中隐藏了该选项,因为您根据所选列表而不是相反的列表来定位元素。

这一个:

<select name="team_compare1" id="team_compare1" onchange="option_hide(1)">

您必须将其更改为:

if (list == 1) {
    // since list = 1, then it will hide the element on list1
    option_to_hide2 = document.getElementById(team_selected + list);
    option_to_hide2.style.display = 'none';
}

Fiddle