Как проверить значение выбранного параметра при загрузке страницы?

Question

Я пытаюсь проверить значение в выбранной на странице загрузке. Если значение Yes, то tab должно отображаться по умолчанию, а если n/a, будет скрыто. После загрузки страницы пользователь может изменить параметр на yes или n/a, и он покажет / скроет обмен. Я могу сделать замену, но не для первой загрузки.

<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

Вы можете просто вызвать изменение отдельно от объявления, как показано ниже

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

, поэтому код станет примерно таким:

$(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

создать функцию для контрольного значения hide_show (select_val) и передать значение поля select в этой функции function.call во время загрузки страницы и во время изменения окна выбора.

$(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>