on dropdown change selectpicker is not working - javascript

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

Related

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?

get the selected item added dynamically jquery

I managed to dynamically add input fields using this code :
My HTML :
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row ">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
My script :
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn", function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
$(".form_field_outer").append(
`
<div class="col-12">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
No, I'm trying to get the id_casting of each selected item in selecbox for each added rows
So I tried the following scipt :
<script type="text/javascript">
$(document).ready(function(){
$("#id_casting").change(function(){
console.log("clickk");
let id_casting = $(this).find("option:selected").data("id");
console.log(id_casting);
});
});
/* });*/
</script>
Bu this script get only the id_casting of the first row and when I add a new row and I select item from select-box it doesn't get the id_casting of the selected item of select-box added
dynamically.

Hide closest row anchor tag jquery

I have multiple div with class rows and in each row there is a dropdown on change of dropdown i want to hide the anchor tag with class "add_marks" which is inside the same row.
I'm using the following code to hide it:
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row');
var elem = $(nearest_row).closest(".add_marks");
elem.hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Class</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="col-xs-1 col-sm-7 col-md-1"><i class="material-icons">add</i>Add Marks</div>
</div>
</div>
You have to get the next div and find the a link, then hide it.
var nearest_row = $(this).closest('div.row');
gets you the div.row.clearfix.attr_fields but the link is present in the next div, so doing next gets you the next div element, then you find the 'a' element.
You can also do next('div') instead of getting the next element to find the next div.
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row').next().find('.add_marks').hide();
//console.log(nearest_row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Class</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="col-xs-1 col-sm-7 col-md-1"><i class="material-icons">add</i>Add Marks</div>
</div>
</div>
Here is Working code example run it with js (shortcut: ctrl + enter)
...want to hide the anchor tag with class "add_marks" which is inside the same row.
So I have moved that button inside row.
Using .col* as direct child of .row is proper way of using bootstrap grid.
Used the following jQuery considering your requirement.
jQuery(document).on('change', '.subject', function (e) {
$(this)
.parents('.row')
.find('.add_marks')
.hide();
});

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>

Get selected Option from Bootstrap Dropdown

I want to get the currently selected option. I have this html bootstrap code:
<div class="form-group">
<label class="col-md-4 control-label" for="callType">Call</label>
<div class="col-md-6">
<select id="callType" name="callType" class="form-control">
<option value="getBpmn">getBpmn</option>
<option value="getTime">getTime</option>
</select>
</div>
</div>
and the following js:
$(document).ready(function () {
$('#callType').change(dropped)
});
function dropped(){
console.log($(this).parent())
}
But I have no Idea how to get the selected option.
$("select").val() gives you value of selected option. in your code $(this).val() gives you value of select box
$(document).ready(function () {
$('#callType').change(dropped)
});
function dropped(){
console.log($(this).val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-4 control-label" for="callType">Call</label>
<div class="col-md-6">
<select id="callType" name="callType" class="form-control">
<option value="getBpmn">getBpmn</option>
<option value="getTime">getTime</option>
</select>
</div>
</div>

Categories