CODEWITHSUNDEEP
javascripthtml
mitch2k
mitch2k

Reputation: 526

Hide a select based on the value of another select

I'm trying to achieve to make the visibility of 1 select item dependent of another 1. I thought I could to this with javascript like this:

Head:

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    jQuery(document).ready(function (){
        jQuery("#filepermissiontype").change(function() {           

            if (jQuery(this).val() = "global") {
                jQuery("#filepermissioncompanyid").hide();
            }else{
                jQuery("#filepermissioncompanyid").show();
            } 
        });
    });
    </script>

Elements:

    <select id="filepermissiontype" data-placeholder="..." name="filepermissiontype"  class="select" value="<?php echo set_value('filepermissiontype'); ?>">
<option></option>
<option value="global">Everyone</option>
<option value="company">Company</option>
<option value="companyandchildren">Company & children</option>                                          
</select>

<select id="filepermissioncompanyid" data-placeholder="..." name="filepermissioncompanyid"  class="select" value="<?php echo set_value('filepermissioncompanyid'); ?>">
<option></option>
<option value="1">Corp 1</option>
<option value="2">Corp 2</option>
<option value="2">Corp 3</option>                                           
</select>

With this, I expect that when I select global in the first select, the second select would disappear, but this is not happening. What am I doing wrong?

Thanks

Upvotes: 1

Views: 86

Answers (3)

AGE
AGE

Reputation: 3792

Your comparison is not correct:

if(jQuery(this).val() = "global"){...}

Should be

if(jQuery(this).val() == "global"){...}

Or

if(jQuery(this).val() === "global"){...}

Keep in mind that assignment = is not the same as comparison for equality == or strict equality ===

EDIT: according to the comments below, the OP has problems getting the value of the select option. Try doing the following:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    jQuery(document).ready(function (){
        jQuery("select[id=filepermissiontype]").change(function() {           
            if (jQuery(this).val() = "global") {
                jQuery("#filepermissioncompanyid").hide();
            }else{
                jQuery("#filepermissioncompanyid").show();
            } 
        });
    });
</script>

Please see this Stack Overflow Answer as a future reference.

Upvotes: 0

goeldeepika3
goeldeepika3

Reputation: 91

Small mistake '=' is assignment, == for compare

     jQuery(document).ready(function (){
     jQuery("#filepermissiontype").change(function() {           

     if (jQuery(this).val() == "global") {
             jQuery("#filepermissioncompanyid").hide();
        }else{
            jQuery("#filepermissioncompanyid").show();
        } 
    });
});

Upvotes: 0

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23379

you're using an assignment operator when you meant to use a comparison operator. simple mistake. change to...

if (jQuery(this).val() == "global"){...}

Upvotes: 1

Related Questions