引导程序4-模式形式的div，在选择时未显示div

Question

在Laravel应用程序中，我有一个模式窗体，该窗体在加载时仅显示一个选择菜单。当用户进行选择时，div需要显示在下面，并带有其他后续选项的选择。我已经尝试了SO和Code Pen的许多方法，但似乎无法显示后续的div。下面的代码是我最终结束的地方。任何帮助将不胜感激。

$(document).ready(function () {
    $('.scopes').hide();
        $('#programSelect').change(function () {
            $('.scopes').hide();
            $('#'+$(this).val()).show();
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label for="programSelect">Select Program</label>
    <span class="bg-danger">{{ $errors->first('program') }}</span>
    <select id="programSelect" class="form-control custom-select program-select" name="program">
        <option></option>
        @foreach($program as $program)
            <option value="{{ $program->id }}">{{ $program->abbr }}</option>
        @endforeach
    </select>
</div>

<div class="form-group scopes nop" id="nop">
    <label for="nopselect">Select NOP Scope</label>
    <span class="bg-danger">{{ $errors->first('nopselect') }}</span>
    <select name="scope_id" class="form-control custom-select" id="nopselect">
        <option selected></option>
        <option value="1">Crops</option>
        <option value="2">Livestock</option>
        <option value="3">Handling</option>
        <option value="4">Wild Crops</option>
    </select>
</div>
<div class="form-group scopes eu" id="eu">
    <label for="euselect">Select EU Scope</label>
    <span class="bg-danger">{{ $errors->first('euselect') }}</span>
    <select name="scope_id" class="form-control custom-select" id="euselect">
        <option selected></option>
        <option value="5">Unprocessed Plant Products</option>
        <option value="6">Livestock</option>
        <option value="7">Handling</option>
        <option value="8">Feed</option>
        <option value="9">Seed</option>
        <option value="10">Aquaculture</option>
    </select>
</div>
<div class="form-group scopes jpexport" id="jpexport">
    <label for="jpexportselect">Select JP Export Scope</label>
    <span class="bg-danger">{{ $errors->first('jpexportselect') }}</span>
    <select name="scope_id" class="form-control custom-select" id="jpexportselect">
        <option selected></option>
        <option value="27">Crops</option>
        <option value="28">Handling</option>
    </select>
</div>
<div class="form-group scopes gots" id="gots">
    <label for="gotsselect">Select GOTS Scope</label>
    <span class="bg-danger">{{ $errors->first('gotsselect') }}</span>
    <select name="scope_id" class="form-control custom-select" id="gotsselect">
        <option selected></option>
        <option value="17">Dry</option>
        <option value="18">Wet</option>
        <option value="19">Trading</option>
        <option value="20">Inputs</option>

    </select>
</div>
<div class="form-group scopes te" id="te">
    <label for="teselect">Select TE Scope</label>
    <span class="bg-danger">{{ $errors->first('teselect') }}</span>
    <select name="scope_id" class="form-control custom-select" id="teselect">
        <option selected></option>
        <option value="25">OE</option>
        <option value="26">OCS</option>
    </select>
</div>
<div class="form-group scopes cor" id="cor">
    <label for="corselect">Select COR Scope</label>
    <span class="bg-danger">{{ $errors->first('corselect') }}</span>
    <select name="scope_id" class="form-control custom-select" id="corselect">
        <option selected></option>
        <option value="29">Crops</option>
    </select>
</div>
<div class="form-group scopes jas" id="jas">
    <label for="jasselect">Select JAS Scope</label>
    <span class="bg-danger">{{ $errors->first('jasselect') }}</span>
    <select name="scope_id" class="form-control custom-select" id="jasselect">
        <option selected></option>
        <option value="11">Crops</option>
        <option value="12">Handling</option>
        <option value="13">Repack Crops</option>
        <option value="14">Repack Food</option>
        <option value="15">Feed</option>
        <option value="16">Repack Feed</option>
        <option value="30">Wild Harvest</option>
    </select>
</div>
<div class="form-group scopes npop" id="npop">
    <label for="npopselect">Select NPOP Scope</label>
    <span class="bg-danger">{{ $errors->first('npopselect') }}</span>
    <select name="scope_id" class="form-control custom-select" id="npopselect">
        <option selected></option>
        <option value="21">Crops</option>
        <option value="22">Livestock</option>
        <option value="23">Processing</option>
        <option value="24">Trading</option>
    </select>
</div>