Show & hide html element based on selected text using jquery - html

Question

I want to set attribute name & show select option if the selected text is not "Super Admin" and unset the attribute name & hide the select option if the selected text is "Super Admin".
<div class="form-group">
<select id="role_user" name="role" class="form-control" required>
<option value="">Select role user</option>
<option value="Admin">Admin</option>
<option value="Supervisor">Supervisor</option>
<option value="Super Admin">Super Admin</option>
</select>
</div>
The element that I want to show & hide:
<div class="form-group" id="company" style="display: none">
<label>Company</label>
<select id="company_i" class="form-control">
<option value="">Select Company</option>
#foreach ($company as $cp)
<option value="{{ $cp->id }}">{{ $cp->name }}</option>
#endforeach
</select>
</div>
JQuery code:
$(document).ready(function() {
$('#role_user').change(function() {
if ($('#role_user option:selected').text() != "Super Admin") {
$('#company').show();
$('#company_i').attr('name', 'company_id');
} else if ($('#role_user option:selected').text() == "Super Admin") {
$('#company').hide();
$('#company_i').removeAttr("name");
}
})
});
I have tried it using the code above, but only the set & remove name attribute are working. The show & hide not working.

Answer 1

$(document).ready(function () {
$('#role_user').change(function () {
if ($(this).val() != "Super Admin") {
$('#company').show();
$('#company_i').attr('name', 'company_id');
} else {
$('#company').hide();
$('#company_i').removeAttr("name");
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<select id="role_user" name="role" class="form-control" required>
<option value="">Select role user</option>
<option value="Admin">Admin</option>
<option value="Supervisor">Supervisor</option>
<option value="Super Admin">Super Admin</option>
</select>
</div>
<div class="form-group" id="company" style="display: none">
<label>Company</label>
<select id="company_i" class="form-control">
<option value="">Select Company</option>
</select>
</div>