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

Javascript show/hide based on dropdown

提问by Peter Susko

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 getElementsByClassbut for some reason it's not working.

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

Here is the Javascript:

这是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:

和 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=Referraland input class=Referral2should appear. Upon selection of Other, label class=Otherand input class=Other2should appear (and referral should hide).

从下拉列表中选择推荐时，应显示标签class=Referral和输入class=Referral2。选择其他后，标签class=Other和输入class=Other2应该出现（并且推荐应该隐藏）。

采纳答案by JSuar

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

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

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

工作示例：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

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>?

?

?

回答by ggcodes

try this script just change the variables used.

试试这个脚本只是改变使用的变量。

<script type="text/javascript">
function ChangeDropdowns(value){
    if(value=="los"){
        document.getElementById('provider').style.display='none';
    }else if(value=="icm"){
        document.getElementById('provider').style.display='block';
    }
}
</script>

<select id="abonnement" name="abonnement" onchange="ChangeDropdowns(this.value);">
    <option value="">Selecteer soort</option>
    <option value="los">Los toestel</option>
    <option value="icm">Toestel icm abonnement</option>
</select>

<select id="provider" name="provider">
    <option value="">Selecteer een provider</option>
    <option value="">Maakt niet uit</option>
</select>