How do I check the value on selected option on page load?

Question

I'm trying to check the value in the selected on page load. If the value is Yes the tab should be show by default and if n/a , will be hide. After page load, user can change the option to yes or n/a and it will show/hide onchange. I'm able to do the onchange but not for the first time load.

<div class="form-group ">
    <select name="PrivateTeam" id="PrivateTeam" class="form-control" required>
        <option value="">-- Select Option --</option>
        <option value="n/a" 
            <?php echo set_select('PrivateTeam', 'n/a', ('n/a' == $team->PrivateTeam) ? TRUE : FALSE); ?>>n/a
        </option>
        <option value="Yes" 
            <?php echo set_select('PrivateTeam', 'Yes', ('Yes' == $team->PrivateTeam) ? TRUE : FALSE); ?>>Yes
        </option>
    </select>
</div>

<div class="nav-tabs-custom">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab_Task" data-toggle="tab">Task</a></li>
        <li id="li_PrivReq"><a href="#tab_PrivReq" data-toggle="tab">Private Team Requesters</a></li>
        <li id="li_AltApp"><a href="#tab_AltApp" data-toggle="tab">Alternative Approver</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab_Task">
            <?php $this->load->view('team/team/edit/_Task'); ?>
        </div>
        <div class="tab-pane" id="tab_PrivReq">
            <?php $this->load->view('team/team/edit/_PrivRequester'); ?>
        </div>
        <div class="tab-pane" id="tab_AltApp">
            <?php $this->load->view('team/team/edit/_AltApprover'); ?>
        </div>
    </div>
</div>

Javascript

$(document).ready(function() {
    $("#PrivateTeam").change(function() {
        var val = $(this).val();
        if (val === "Yes") {
            $("#li_PrivReq").show();
            $("#tab_PrivReq").show();
        } else {
            $("#li_PrivReq").hide();
            $("#tab_PrivReq").hide();
        }
    });
});

Answer 1

You can just trigger on change seperate from declaration like below

$("#PrivateTeam").trigger('change');

so code will become something like

$(document).ready(function() {
    $("#PrivateTeam").change(function() {
        var val = $(this).val();
        if (val === "Yes") {
            $("#li_PrivReq").show();
            $("#tab_PrivReq").show();
        } else {
            $("#li_PrivReq").hide();
            $("#tab_PrivReq").hide();
        }
    });
   $("#PrivateTeam").trigger('change');
});

Answer 2

create a function for check value hide_show(select_val) and pass select field value in that function.call function at the page load time and on select box change time.

 $(document).ready(function() { var privateTeam = $('#PrivateTeam').val(); hide_show(privateTeam); $("#PrivateTeam").change(function() { var val = $(this).val(); hide_show(val); }); }); function hide_show(privateTeam){ if (privateTeam === "Yes") { $("#li_PrivReq").show(); $("#tab_PrivReq").show(); } else { $("#li_PrivReq").hide(); $("#tab_PrivReq").hide(); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group "> <select name="PrivateTeam" id="PrivateTeam" class="form-control" required> <option value="">-- Select Option --</option> <option value="n/a">n/a </option> <option value="Yes" selected>Yes </option> </select> </div> <div class="nav-tabs-custom"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab_Task" data-toggle="tab">Task</a></li> <li id="li_PrivReq"><a href="#tab_PrivReq" data-toggle="tab">Private Team Requesters</a></li> <li id="li_AltApp"><a href="#tab_AltApp" data-toggle="tab">Alternative Approver</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_Task"> tab Task </div> <div class="tab-pane" id="tab_PrivReq"> tab PrivReq </div> <div class="tab-pane" id="tab_AltApp"> tab AltApp </div> </div> </div>