javascript — Показать / скрыть таблицу не работает в выпадающем списке onchange

$('select[name=\'type\']').on('change', function() {
if (this.value == 'select' || this.value == 'radio' || this.value == 'checkbox' || this.value == 'image') {
$('#option-value').parent().show();
} else {
$('#option-value').parent().hide();
}
});

$('select[name=\'type\']').trigger('change');

var option_value_row = 0

function addOptionValue() {
html = '<tr id="option-value-row' + option_value_row + '">';
html += '  <td class="text-left"><input type="hidden" name="option_value[' + option_value_row + '][option_value_id]" value="" />';
html += '<img src="http://clicshopping.no-ip.biz/clicshopping_test/boutique/sources/third_party/flag-icon-css/flags/4x3/us.svg" alt="Anglais" title="Anglais" width="16" height="12" /><input type="text" name="option_value[' + option_value_row + '][option_value_description][name][0]" value="" class="form-control" required aria-required="true" />';
html += '<input type="hidden" name="option_value[' + option_value_row + '][option_value_description][language_id][0]" value="1" class="form-control" />';
html += '<img src="http://clicshopping.no-ip.biz/clicshopping_test/boutique/sources/third_party/flag-icon-css/flags/4x3/fr.svg" alt="Francais" title="Francais" width="16" height="12" /><input type="text" name="option_value[' + option_value_row + '][option_value_description][name][1]" value="" class="form-control" required aria-required="true" />';
html += '<input type="hidden" name="option_value[' + option_value_row + '][option_value_description][language_id][1]" value="2" class="form-control" />';
html += '  </td>';
html += ' <td> <input type="file"  name="option_value[' + option_value_row + '][image]" value="" accept="image/*" class="form-control" /><input type="hidden" name="MAX_FILE_SIZE" value="1024"></td>';
html += '  <td class="text-right"><input type="text" name="option_value[' + option_value_row + '][sort_order]" value="" class="form-control" /></td>';
html += '  <td class="text-right"><button type="button" onclick="$(\'#option-value-row' + option_value_row + '\').remove();" data-toggle="tooltip" title="button_remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';

$('#option-value tbody').append(html);

option_value_row++;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div id="attributesGroupTabs" style="overflow: auto;">
<ul class="nav nav-tabs flex-column flex-sm-row" role="tablist" id="myTab">
<li class="nav-item"><a href="#tab1" role="tab" data-toggle="tab" class="nav-link active">Géneral</a></li>
<li class="nav-item"><a href="#tab2" role="tab" data-toggle="tab" class="nav-link">Valeurs option</a></li>
</ul>
<div class="tabsClicShopping">
<div class="tab-content">
<div class="col-md-12 tab-pane active" id="tab1">
<div class="separator"></div>
<div class="row">
<div class="col-md-5">
<div class="form-group row">
<label for="code" class="col-2 col-form-label">en</label>
<div class="col-md-5">
<input type="1" name="name[1]" class="form-control" required aria-required="true" required="" id="attributes_name" placeholder="Nom option" class="form-control" />&nbsp; </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group row">
<label for="code" class="col-2 col-form-label">fr</label>
<div class="col-md-5">
<input type="1" name="name[2]" class="form-control" required aria-required="true" required="" id="attributes_name" placeholder="Nom option" class="form-control" />&nbsp; </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group row">
<label for="Type Html" class="col-5 col-form-label">Type Html</label>
<div class="col-md-5">
<select name="type" id="input-type" class="form-control"><option value="2">checkbox</option><option value="7">date</option><option value="9">datetime</option><option value="4">file</option><option value="1">radio</option><option value="5">select</option><option value="3">text</option><option value="6">textarea</option><option value="8">time</option></select>                </div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-5">
<div class="form-group row">
<label for="Ordre de tri" class="col-5 col-form-label">Ordre de tri</label>
<div class="col-md-5">
<input type="text" name="sort_order" value="0" placeholder="Ordre de tri" class="form-control" /> </div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="separator"></div>
<table id="option-value" class="table table-sm table-hover table-hover">
<thead>
<tr class="dataTableHeadingRow">
<td class="text-md-center" width="50%">Nom de la valeur</td>
<td class="text-md-center" width="30%">Image</td>
<td class="text-md-center" width="10%">Ordre de tri</td>
<td class="text-md-right" width="10%">Action</td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4"></td>
<td class="text-right"><button type="button" onclick="addOptionValue();" data-toggle="tooltip" title="button_add" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>