We Keep Coding

jQuery Dropdown Show/Hide div not work fine

I am trying to use the following code which works well. I'm doing a CRUD operation. When I create an object then it works very well. However when I want to edit then this input field was hidden. I want to hide and show based on values.
$(document).ready(function() {
// debugger;
$('#isRequested').change(function() {
if ($(this).val() == "true" && $(this).val() != "select") {
$('.entity').show();
} else {
$('.entity').hide();
}
})
});
$(document).ready(function() {
$('#isApproved').change(function() {
if ($(this).val() != "true" && $(this).val() != "select") {
$('#denial').show();
} else {
$('#denial').hide();
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 row">
<div class="col-md-4">
<label class="col-form-label text-lg-left" asp-for="IsPreviouslyRequestedAssistance"></label>
<select class="form-control click" id="isRequested" asp-for="IsPreviouslyRequestedAssistance">
<option value="select">Please Select</option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
<div class="col-md-4 entity showup" style="display:none">
<label id="EntityName" class="col-form-label " asp-for="EntityName"></label>
<input type="text" id="EntityName" asp-for="EntityName" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 row entity" style="display: none">
<div class="col-md-4 ">
<label asp-for="WasApproved" class="col-form-label"></label>
<select id="isApproved" class="form-control " asp-for="WasApproved">
<option value="select">Please Select</option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
<div class="col-md-4" id="denial" style="display: none">
<label asp-for="ReasonForDenial" class="col-form-label"></label>
<input type="text" class="form-control" asp-for="ReasonForDenial">
</div>
</div>
</div>
Can you tell me what should I do?

Show/hide div and clear filed value when change

I have some div that will show depending on the select value. Suppose there are two input fields name 'Apartment and Bechelor' If I select 'Apartment' some div and select field will show related to the apartment. The problem I am facing is, I can't clear the field value when selecting another. Like, after selecting 'Apartment', I will select Bachelor. Now it should be clear the value of the field which was under the apartment so that If I again select 'Apartment', I will get default values or clean fields.
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" >
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
<div class="form-group " id="flat-type">
<div class="col-sm-12">
<select id="" class="form-control" name="flat-type">
<option value="">Select Flat Type</option>
<option value="sublet" >Sublet</option>
<option value="full-flat" >Full Flat</option>
</select>
</div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
<div class="col-sm-12">
<select id="room" class="form-control" name="room_type">
<option value="">Select Room Type</option>
<option value="seat">Seat</option>
<option value="room" >Room</option>
</select>
</div>
</div>
<div class="form-group " id="tenant">
<div class="col-sm-12">
<select id="" class="form-control" name="tenant">
<option value="">Select Member</option>
<option value="family" >Family</option>
<option value="student" >Student</option>
<option value="job-holder" >Job Holder</option>
</select>
</div>
</div>
<script>
$(document).ready(function(){
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-flat').hide();
$('#flat-type').hide();
$('.pretty input[type="radio"]').click(function(){
if($(this).attr('value') == 'apartment'){
$('#tenant-flat').show();
}
else{
$('#flat-type').hide();
}
});
var showDiv = document.getElementById("tenant-type");
showDiv.onchange = function(){
var hiddenDiv = document.getElementById("flat-type");
hiddenDiv.style.display = (this.value == "family") ? "block":"none";
var genderDiv = document.getElementById("gender");
genderDiv.style.display = (this.value == "bechelor") ? "block":"none";
};
$('.pretty input[type="radio"]').click(function(){
if($(this).attr('value') == 'bachelor' || $(this).attr('value') == 'sublet' || $(this).attr('value') == 'hostel' ){
$('#r-type').show();
$('#tenant').show();
$('#tenant-type').hide();
}
else{
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-type').show();
}
});
});
</script>

to reset the dropdown options you can set the value of the select elements selectIndex property to 0 with this line:
$('.form-control').prop('selectedIndex', 0);
and in your code:
$(document).ready(function(){
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-flat').hide();
$('#flat-type').hide();
$('#residential input[type="radio"]').click(function(){
if($(this).attr('value') == 'apartment'){
$('#tenant-flat').show();
$('#flat-type').show();
$('#r-type').hide();
$('#tenant').hide();
}
else{
$('#r-type').show();
$('#tenant').show();
$('#flat-type').hide();
$('#tenant-flat').hide();
}
$('.form-control').prop('selectedIndex', 0);
});
$('#tenent-type').on('change', function() {
if($('#flat-type').val =='family') {
$('#flat-type').show();
} else {
$('#flat-type').hide();
}
if($('#gender').val =='bechelor') {
$('#gender').show();
} else {
$('#gender').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" >
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
<div class="form-group " id="flat-type">
<div class="col-sm-12">
<select id="" class="form-control" name="flat-type">
<option value="">Select Flat Type</option>
<option value="sublet" >Sublet</option>
<option value="full-flat" >Full Flat</option>
</select>
</div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
<div class="col-sm-12">
<select id="room" class="form-control" name="room_type">
<option value="">Select Room Type</option>
<option value="seat">Seat</option>
<option value="room" >Room</option>
</select>
</div>
</div>
<div class="form-group " id="tenant">
<div class="col-sm-12">
<select id="" class="form-control" name="tenant">
<option value="">Select Member</option>
<option value="family" >Family</option>
<option value="student" >Student</option>
<option value="job-holder" >Job Holder</option>
</select>
</div>
</div>

JQUERY replace text on data-empty_label value

I tried to change the default empty value "" with friendly labels however I was not successful for subcategory and name selects since data is coming dynamically from django. category works fine since there is an empty option when page loads however subcategory and name load on select data-empty_label "----------" instead and no options are visible.
<div class="form-row">
<input type="hidden" name="csrfmiddlewaretoken" value="xxxxx">
<div class="form-group custom-control col-md-3">
<select name="category" class="custom-select custom-select-lg" required id="id_category">
<option value="" selected>---------</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="form-group custom-control col-md-3">
<select name="subcategory" disabled class="custom-select custom-select-lg chained-fk" required id="id_subcategory" data-chainfield="category" data-url="/chaining/filter/xxxxx" data-value="null" data-auto_choose="false" data-empty_label="--------" name="subcategory">
</select>
</div>
<div class="form-group custom-control col-md-3">
<select name="name" disabled class="custom-select custom-select-lg chained-fk" required id="id_name" data-chainfield="subcategory" data-url="/chaining/filter/xxxxx" data-value="null" data-auto_choose="false" data-empty_label="--------" name="name">
</select>
</div>
<div class="form-group col-md-3">
<input type="submit" value="Submit" class="btn-lg btn-success btn-block">
</div>
</div>
<script>
$(document).ready(function() {
$("select").on("change", function() {
if($("select[name='category']").val() == "") {
$("select[name='category'] > option:first-child").text('Category');
$("select[name='subcategory']").prop('disabled', 'disabled');
$("select[name='subcategory'] > option:first-child").text('Subcategory');
$("select[name='name']").prop('disabled', 'disabled');
$("select[name='name'] > option:first-child").text('Recipe');
} else {
$("select[name='subcategory']").removeAttr("disabled");
$("select[name='subcategory'] > option:first-child").text('Subcategory');
}
}).trigger('change');
$("select[name='subcategory']").on("change", function() {
$("select[name='subcategory'] > option:first-child").text('Subcategory');
if($(this).val() == "") {
$("select[name='name']").prop('disabled', 'disabled');
$("select[name='recipename'] > option:first-child").text('Recipe');
} else {
$("select[name='name']").removeAttr("disabled");
$("select[name='ename'] > option:first-child").text('Recipe');
}
}).trigger('change');
});
</script>

Hide the form when clicked on a particular option of dropdown and show the form when clicked on a particular option of dropdown

I want to show a form when clicked on a particular option of a dropdown and hide the form when clicked on a particular option of a dropdown
This is my html code:
<div class="form-group" id="venue-select">
<select class="form-control venue-dropdown" id="" onchange="myFunction()">
<option value="none" id="#hide" ><b>Select Venue Type</b></option>
<option>Theme Restaurant</option>
<option>Blah restaurant</option>
<option>Flana Restaurant</option>
<option>Woops Restaurant</option>
</select>
</div>
<div class="row bgcolor show-form" style="display:none;">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
<form>
<div class="form-group">
<label><strong>Venue Name</strong><sup class = "venue-imp">*</sup></label>
<input type="text" class="form-control input-lg" placeholder="Jhanqar Banquet Hall">
</div>
</form>
</div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
<form>
<div class="form-group">
<label><strong>Venue Price</strong><sup class = "venue-imp">*</sup></label>
<input type="text" class="form-control input-lg" placeholder="Jhanqar Banquet Hall">
</div>
</form>
</div>
</div>
it's working perfectly when i click on any venue in the dropdown but i want the form to hide when i click on select any venue
this is my javascript code:
/*show fom*/
function myFunction() {
$('.show-form').show();
// $('.show-form').hide();
}

Try to this
<select class="form-control venue-dropdown" id="" onchange="myFunction(this.value)">
<option value="Theme Restaurant 1">Theme Restaurant 1</option>
<option value="Theme Restaurant 2">Theme Restaurant 2</option>
</select>
<script>
function myFunction(select_value) {
if(select_value == 'Theme Restaurant 1')
{
$('.show-form').show();
}
}
</script>

How to Show/Hide Div on SelectedIndex in Bootstrap 3?

I have this code:
<div class="form-group">
<label for="slDisThrough" class="col-sm-1 control-label">Distributed Through</label>
<div class="col-sm-11">
<select name="slDisThrough" id="slDisThrough" class="form-control">
<option value="0">-Select-</option>
<option value="1">Agent</option>
<option value="2">Retail</option>
</select>
</div>
</div>
<div id="slAgentID" class="hide">
<div class="form-group">
<label for="slAgent" class="col-sm-1 control-label">Agent</label>
<div class="col-sm-11">
<select name="slAgent" class="form-control">
<option value="0">-Select-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
</div>
</div>
</div>
<div id="slRetailID" class="hide">
<div class="form-group">
<label for="slRetail" class="col-sm-1 control-label">Retail</label>
<div class="col-sm-11">
<select name="slRetail" class="form-control">
<option value="0">-Select-</option>
<option value="1">Hide</option>
<option value="2">Show</option>
</select>
</div>
</div>
</div>
Check this Fiddle
if(document.getElementById("slDisThrough").selectedIndex == 1) {
document.getElementById("slAgentID").style.display = ""; }
else { document.getElementById("slAgentID").style.display = "none"; }
if(document.getElementById("slDisThrough").selectedIndex == 2) {
document.getElementById("slRetail").style.display = ""; }
else { document.getElementById("slRetail").style.display = "none"; }
I need to Show/Hide the DIVs on Selected Value, I was previously using it with JavaScript, but stuck with Bootstrap.

Since you load jQuery, better use it like this:
$('#slDisThrough').on('change', function(){
if ($(this).val() == 1 ) {
$('#slAgentID').removeClass('hide');
$('#slRetailID').addClass('hide');
}
if ($(this).val() == 2 ) {
$('#slAgentID').addClass('hide');
$('#slRetailID').removeClass('hide');
}
})
Jsfiddle here