Hide a select based on the value of another select

Question

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

changed if (jQuery(this).val() = "global") to if (jQuery(this).val() == "global") — mitch2k, Dec 09 '15 at 21:05

score 1 · Answer 1 · answered Dec 09 '15 at 20:57

1

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

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

answered Dec 09 '15 at 20:57

I wrestled a bear once.

22,983
19
69
116

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

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.

edited May 23 '17 at 12:30

Community

1
1

answered Dec 09 '15 at 20:58

AGE

3,752
3
38
60

Hi, I tried that (stupid mistake of me) but that does not change a thing in the result. So even with if (jQuery(this).val() == "global"), the second select is always there – mitch2k Dec 09 '15 at 21:06
Then break it down, `console.log(jQuery(this).val());` should help to identify the root of your problems within `jQuery("#filepermissiontype").change`. If the values are the same and the comparison works, then something is interfering with the `.hide()` and `.show()` jQuery functionality – AGE Dec 09 '15 at 21:08
Hi, I've added it like this: `` But I don't see anything in the console – mitch2k Dec 09 '15 at 22:28
@mitch2k I have updated my answer with a fix you needed. Instead of using the selector `jQuery("#filepermissiontype")`, I used `jQuery("select[id=filepermissiontype]")` give that a try – AGE Dec 10 '15 at 14:44
Thanks for your help. Unfortunately even with == and jQuery("select[id=filepermissiontype]") it is not working. – mitch2k Dec 17 '15 at 17:38
Now I added in head: `` But don't see anything in my Chrome console :s – mitch2k Dec 17 '15 at 17:38
@mitch2k first of all try to keep all your jQuery code inside your `jQuery(document).ready(function (){ `, meaning your `console.log("TEST"); ` as well. Second, your code works now see this jsFiddle: https://jsfiddle.net/AGE/hz70oq3p/ – AGE Dec 17 '15 at 20:32
Thanks for the jsfiddle. There must be something else on the codeigniter view that is interfering with this js. I have to put it between the head tag, right? – mitch2k Dec 17 '15 at 23:48
I would always add my ' – AGE Dec 18 '15 at 01:07

score 0 · Answer 3 · answered Dec 09 '15 at 20:58

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();
        } 
    });
});

Hide a select based on the value of another select

3 Answers3