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?

How to show the dropdown list based on the picklist values

I have an angular application in that I have to show the dropdown list based on the picklist values.
.service.ts
public getLists() {
let baseUrl = `/endpoint`;
this._restfulService
.restfulGetData(baseUrl)
.subscribe(
(LookupData: LookupData) => {
if (LookupData) {
this.option1data = LookupData.option1Data;
this.option2data = LookupData.option2Data;
this.option3data = LookupData.option3Data;
this.option4data = LookupData.option4Data;
}
},
(err) => {
console.error(err);
}
);
}
.component.html
<div class="row">
<div class="form-group">
<div class="col-sm-3">
<label for="action"> <b>Category</b></label>
</div>
<div class="col-sm-7">
<select>
<option value="" disabled [selected]="true"></option>
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
</div>
</div>
</div>
<div class="row>
<div class="form-group">
<div class="col-sm-3>
<label for="action"> <b>Lists</b></label>
</div>
<div class="col-sm-7">
<select>
<option value="" disabled [selected]="true"></option>
<option>
//In this dropdown I have to show the lists based on the selection of picklists
</option>
</select>
</div>
</div>
</div>
So In tha above code if I select option1 from the picklist I have to show the option1Data dropdownlist etc..
can anyone helpme on this

<div class="row">
<div class="form-group">
<div class="col-sm-3">
<label for="action"> <b>Lists</b></label>
</div>
<div class="col-sm-7">
<select>
<option disabled selected="true">Select pick</option>
<option *ngFor="let items of LookupData" [ngValue]="items.name">
{{ items.name }}
</option>
</select>
</div>
</div>
</div>
please put the above code in the HTML file. Hope this code will helpful to you

Jquery Getting Value From FIrst Dropdown In A Loop

I am having a popup and a foreach on my view , it has a dropdown too, on a button click I need to get the selected value of the drop-down,
Each time I click it returns the first drop down value
I couldn't use $(this).val()
Is there any way.
This is my code
$( ".ecg_followup_submit" ).click(function(e) {
alert($( ".reviewoutcome_change option:selected" ).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<label for="exampleInputPassword1">Review outcome:</label>
</div>
<div class="col-md-6">
<select class="form-control reviewoutcome_change" name="review_outcome" id="declined_reason">
<option value="select">Select</option>
<option value="normal">Normal</option>
<option value="minor" >Minor</option>
</select>
</div>
</div>
</div>
</div>
<div class="row" style="height:10px;"></div>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
</div>
</div>
</div>
<div class="row">
<div class="col-md-9"></div>
</div>
<div class="modal-footer" style = "margin-top:15px;">
<div class="row">
<div class="col-md-6">
<input type="submit" class="btn btn-primary ecg_followup_submit" name="Submit" style = "width:50%; height:35px; margin-right:150px;" />
</div>
</div>
</div>
I have removed the unwanted codes
Thank you

To get the value of 'selected' option you do not need to use :selected. you can get the selected value like any other input. $('your selector').val()
However, if you do not change your selection, the first option will be selected by default.
Here is an example inspired from your code.
jQuery(document).ready(function($){
$('.btn').click(function(e){
e.preventDefault();
console.log($('.reviewoutcome_change').val());
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control reviewoutcome_change" name="review_outcome" id="declined_reason">
<option value="select">Select</option>
<option value="normal">Normal</option>
<option value="minor">Minor</option>
</select>
<button class="btn">show selected</button>

just change
$( ".ecg_followup_submit" ).click(function(e) {
alert($( ".reviewoutcome_change option:selected" ).val());
});
to this
$( ".ecg_followup_submit" ).click(function(e) {
alert($( '.reviewoutcome_change' ).val());
});

Find one common ancestor. I assume that you have multiple rows then?
$(".ecg_followup_submit").click(function (e) {
const row = $(this).closest(".row")
const selectedOption = row.find(".reviewoutcome_change");
alert(selectedOption.val());
});

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>

on dropdown change selectpicker is not working

i m using bootstrap selectpicker. it is working fine on page load but on dropdown change it gives the error that selectpicker is not a function.
Initialization
$(document).ready(function()
{
$(".selectpicker").selectpicker();
}
Html
<div class="row">
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="form-group success">
<label for="title"> Country <span class="asterisk">*</span> </label>
<select data-size="5" onchange="changeCountry(this.value)" class="form-control selectpicker bs-select-hidden" name="Tours[countryid]" id="Tours_countryid">
<option value="">---Select Country---</option>
</select>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="form-group">
<label for="widgettitle"> State <span class="asterisk">*</span> </label>
<select id="Tours_stateid" name="Tours[stateid]" data-size="5" class="form-control selectpicker bs-select-hidden" maxlength="50">
<option value="">---Select State---</option>
</select>
</div>
</div>
</div>
javascript onchange function
function changeCountry(value)
{
$.ajax({
url: "<?php echo Yii::app()->createurl('/site/changecountry') ?>",
type: 'post',
data: {id: value},
success: function (result) {
$("#Tours_stateid").html(result)
$('.selectpicker').selectpicker('refresh');
}
});
}
There is a dropdown dependencies i.e. when we change country then of bases on country, state list will be display

It seems working fine. Its just you have not closed the select element.
<div class="row">
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="form-group success">
<label for="title"> Country <span class="asterisk">*</span> </label>
<select data-size="5" class="form-control selectpicker bs-select-hidden" name="Tours[countryid]" id="Tours_countryid">
<option value="">---Select Country---</option><option value="1">Country1</option><option value="2">Country2</option>
</select>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="form-group">
<label for="widgettitle"> State <span class="asterisk">*</span> </label>
<select id="Tours_stateid" name="Tours[stateid]" data-size="5" class="form-control selectpicker bs-select-hidden" maxlength="50">
<option value="">---Select State---</option>
</select> </div>
</div>
</div>
In js file (using jQuery change event to call local function)
$(document).ready(function(){
$('#Tours_countryid').on('change', function() {
changeCountry(this.value);
});
function changeCountry(value) {
console.log(value);
}
});
Hope it helps