Javascript显示/隐藏基于下拉菜单

问题描述

我已经有了下面的代码来显示/隐藏两个基于下拉选择的表单元素。它在使用ID的页面上有一个表单的单个实例时起作用。现在有多种形式，它们使用类。我试过 getElementsByClass 但由于某种原因，它不起作用。

这里是Javascript：

  function Toggle（obj）{ 
 var val = obj.value; 
 
 if（！obj.m）{obj.m =''; } 
 if（！obj.m.match（val））{obj.m + ='，'+ val +'，'; } 
 
 var hide = obj.m.split（'，'）; 
 
 for（var zxc0 = 0; zxc0< hide.length; zxc0 ++）{
 if（document.getElementsByClassName（hide [zxc0]））{
 document.getElementsByClassName（hide [zxc0]）的style.display = '无'; 
} 
} 
 
 var show = val.split（'，'）; 
 
 for（var zxc1 = 0; zxc1< show.length; zxc1 ++）{
 if（document.getElementsByClassName（show [zxc1]））{
 document.getElementsByClassName（show [zxc1]）的style.display = ''; 
 
 
 
  

和HTML：

 < form class =contactname =contactaction =＃method =post> 
< label>您是如何知道我们的：< / label> 
< div id =style-select> 
< select name =howonChange =Toggle（this）;类= 下拉菜单 > 
< option value =互联网搜索>互联网搜索< /选项> 
< option value =Facebook> Facebook< / option> 
< option value =Twitter> Twitter< / option> 
< option value =LinkedIN> LinkedIN< / option> 
< option value =Referral，Referral2> Referral< / option> 
< option value =Other，Other2>其他< / option> 
< / select> 
< / div> 
< label class =Referralstyle =display：none;>推荐人：< / label> 
< input name =Referral2style =display：none; class =hidden-txt Referral2> 
< label class =其他style =display：none;>请指定：< / label> 
< input name =Other2value =style =display：none; class =hidden-txt Other2> 
 ... 
< / form> 
  

从下拉列表中选择引荐时，标签 class = Referral 并输入 class = Referral2 应该出现。当选择Other时，标签 class = Other 并且输入 class = Other2 应该出现（并且引用应该隐藏）。

解决方案

我认为使用JQuery可能会更快/更容易，除非需要纯JS。


工作示例：



JQuery



  $（select）。change（function（）{
 //隐藏所有可选元素。 （$（this）.val（）==Referral）{
 $（select option：selected）。 （'.referral'）.css（'display'，'block'）; 
} else if（$（this）.val（）==Other）{
 $（'。other '）.css（'display'，'block'）; 
} 
}）; 
}）; 
  

HTML


 < form class =contactname =contactaction =＃method =post> 
< label>您是如何知道我们的：< / label> 
< div id =style-select> 
< select name =howclass =dropdown> 
< option value =互联网搜索>互联网搜索< /选项> 
< option value =Facebook> Facebook< / option> 
< option value =Twitter> Twitter< / option> 
< option value =LinkedIN> LinkedIN< / option> 
< option value =Referral> Referral< / option> 
< option value =其他>其他< / option> 
< / select> 
< / div> 
< label class =optional referralstyle =display：none;> Referred By：< / label> 
< input class =optional referralname =Referral2style =display：none;类= 隐藏-TXT > 
< label class =optional otherstyle =display：none;>请指定：< / label> 
< input class =optional othername =Other2value =style =display：none;类= 隐藏-TXT > 
< label for =注册class =text-checkbox>将我添加到您的电子邮件列表< / label> 
< input type =checkboxname =signupvalue =Yesclass =checkbox> 
< button class =send>提交< / button> 
< / form> 
  




I already have the following code to show/hide two form elements based on a dropdown selection. It worked when there was a single instance of a form on the page using IDs. Now there's multiple forms, which use classes. I've tried getElementsByClass but for some reason it's not working.

Here is the Javascript:

function Toggle(obj){
    var val=obj.value;

    if (!obj.m){ obj.m=''; }
    if (!obj.m.match(val)){ obj.m+=','+val+','; }

    var hide=obj.m.split(',');

    for (var zxc0=0;zxc0<hide.length;zxc0++){
        if (document.getElementsByClassName(hide[zxc0])){
            document.getElementsByClassName(hide[zxc0]).style.display='none';
        }
    }

    var show=val.split(',');

    for (var zxc1=0;zxc1<show.length;zxc1++){
        if (document.getElementsByClassName(show[zxc1])){
            document.getElementsByClassName(show[zxc1]).style.display='';
        }
    }
}

And the HTML:

<form class="contact" name="contact" action="#" method="post">
    <label>How did you hear about us:</label>
    <div id="styled-select">
        <select name="how" onChange="Toggle(this);" class="dropdown">
            <option value="Internet Search">Internet Search</option>
            <option value="Facebook" >Facebook</option>
            <option value="Twitter" >Twitter</option>
            <option value="LinkedIN" >LinkedIN</option>
            <option value="Referral,Referral2" >Referral</option>
            <option value="Other,Other2">Other</option>
        </select>
    </div>
     <label class="Referral" style="display:none;">Referred By:</label>
     <input name="Referral2" style="display:none;" class="hidden-txt Referral2">
     <label class="Other" style="display:none;">Please Specify:</label>
     <input name="Other2" value="" style="display:none;" class="hidden-txt Other2">
     ...
</form>

When referral is selected from the dropdown, the label class=Referral and input class=Referral2 should appear. Upon selection of Other, label class=Other and input class=Other2 should appear (and referral should hide).

解决方案

I think it might be quicker/easier to use JQuery unless pure JS is a requirement.

Working Example: http://jsfiddle.net/p8ARq/2/

JQuery

$("select").change(function () {
    // hide all optional elements
    $('.optional').css('display','none');

    $("select option:selected").each(function () {
        if($(this).val() == "Referral") {
            $('.referral').css('display','block');
        } else if($(this).val() == "Other") {
            $('.other').css('display','block');
        }
    });
});

HTML

<form class="contact" name="contact" action="#" method="post">
    <label>How did you hear about us:</label>
    <div id="styled-select">
        <select name="how" class="dropdown">
            <option value="Internet Search">Internet Search</option>
            <option value="Facebook" >Facebook</option>
            <option value="Twitter" >Twitter</option>
            <option value="LinkedIN" >LinkedIN</option>
            <option value="Referral" >Referral</option>
            <option value="Other">Other</option>
        </select>
     </div>
    <label class="optional referral" style="display:none;">Referred By:</label>
    <input class="optional referral" name="Referral2" style="display:none;" class="hidden-txt">
    <label class="optional other" style="display:none;">Please Specify:</label>
    <input class="optional other" name="Other2" value="" style="display:none;" class="hidden-txt">
    <label for="signup" class="text-checkbox">Add me to your email list</label>
    <input type="checkbox" name="signup" value="Yes" class="checkbox">
    <button class="send">Submit</button>
</form>​

​

这篇关于Javascript显示/隐藏基于下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！