Self populate and/or populate another select by ajax. Unlimited chains/cascading supported!
Callbacks also supported, including a global default callback overwritable by params.
Requirements: server must return the data in json format.
View json format
/*
:: Plugin File
src/js/sow.core/sow.ajax_select.js
:: Plugin Init
*/ $.SOW.core.ajax_select.init('select.js-ajax');
/*
:: Plugin Options|Defaults
*/ $.SOW.core.ajax_select.init('select.js-ajax'. {
method : 'GET',
contentType : '', // jQuery, optional
dataType : '', // jQuery, optional
headers : '', // jQuery, optional
crossDomain : '', // jQuery, optional
data_params : {ajax:'true'}, // jQuery ajax, default params to be sent
/*
callback_example = function(el, value, label) {
// el = target element $(this)
// value = selected value (string)
// label = selected label (string)
}
*/
callback_function : ''
});
/*
:: Overwriting the defaults:
*/
data-ajax-method="GET"
data-ajax-callback-function="callback_example"
<select class="form-control mb-3 js-ajax" data-ajax-target="#county_list">
<option value="0">Select Contry...</option>
<option value="1">United States</option>
<option value="2">Romania</option>
</select>
<select id="county_list" class="form-control" disabled=""
data-ajax-url="_ajax/select_ajax.php"
data-ajax-method="GET"
data-ajax-params="['action','get_county_list']['param2','value2']"
>
<option value="">Select Country First</option>
</select>
<select class="form-control js-ajax bs-select" data-ajax-target="#county_list2">
<option value="0">Select Contry...</option>
<option value="1">United States</option>
<option value="2">Romania</option>
</select>
<select id="county_list2" class="form-control bs-select" disabled=""
data-ajax-url="_ajax/select_ajax.php"
data-ajax-method="GET"
data-ajax-params="['action','get_county_list']['param2','value2']"
>
<option value="">Select Country First</option>
</select>
<select class="form-control bs-select js-ajax"
data-ajax-url-self-populate="_ajax/json_country.json"
data-ajax-method="GET"
data-ajax-params="['action','get_county_list']['param2','value2']">
</select>
<select class="form-control bs-select mb-3 js-ajax"
data-ajax-url-self-populate="_ajax/json_select_show_container.json"
data-ajax-method="GET"
data-ajax-params="['action','get_county_list']['param2','value2']">
</select>
<div id="container__1" class="hide-force">
Container : 1
</div>
<div id="container__2" class="hide-force">
Container : 2
</div>
1. The first select is loading data via ajax/json using the attribute: data-ajax-url-self-populate="..."
2. If there is a default selected option on load (see json), then the second select is triggered to load its own data via ajax/json (data-ajax-url="..." attribute) according to the selected value of the first select. The same logic is when options of the first select are changed!
Is possible to relate multiple selects (cascading) or using a master select related to many others adding multiple IDs separated by comma:
data-ajax-target="#secondSelect, #thirdSelect, #fourthSelect" Of course, a single class can be used instead of IDs, like ".relatedSelects"
Debug is on for this demo, so requests are in the console.
<select class="form-control bs-select mb-3 js-ajax"
data-ajax-method="GET"
data-ajax-target="#secondSelect"
data-ajax-url-self-populate="_ajax/json_country.json"
data-ajax-params="['action','get_county_list']['param2','value2']"
>
</select>
<select id="secondSelect" class="form-control bs-select js-ajax" disabled=""
data-ajax-url="_ajax/select_ajax.php"
data-ajax-method="GET"
data-ajax-params="['action','get_county_list']['paramX','valueX']"
>
<option value="">Select Country First</option>
</select>
<select class="form-control bs-select js-ajax mb-3"
data-ajax-target="#county_list_cb"
data-ajax-callback-function="callback_example1">
<option value="0">Select Contry...</option>
<option value="1">United States</option>
<option value="2">Romania</option>
</select>
<select id="county_list_cb" class="form-control bs-select js-ajax" disabled=""
data-ajax-url="_ajax/select_ajax.php"
data-ajax-method="GET"
data-ajax-callback-function="callback_example2"
data-ajax-params="['action','get_county_list']['param2','value2']"
>
<option value="">Select Country First</option>
</select>
<script>
callback_example1 = function(el, value, label) {
// el = element $(this)
// value = selected value (string)
// label = selected label (string)
$.SOW.core.toast.show('danger', '', 'Label: ' + label + '<br> Value: ' + value, 'top-center', 4000, true);
}
callback_example2 = function(el, value, label) {
// el = element $(this)
// value = selected value (string)
// label = selected label (string)
$.SOW.core.toast.show('danger', '', 'Label: ' + label + '<br> Value: ' + value, 'top-center', 4000, true);
}
</script>
<select class="form-control bs-select mb-3 js-ajax">
<option value="">Select Option...</option>
<option value="1" data-show-container="#container_1">Container 1</option>
<option value="2" data-show-container="#container_2">Container 2</option>
</select>
<div id="container_1" class="hide-force">
Container 1
</div>
<div id="container_2" class="hide-force">
Container 2
</div>
<!--
This will populate the form (inputs, etc) from ajax!
ID's are important - should match the JSON!
The plugin will autodetect element type (input, select, etc)
-->
<select class="form-control bs-select mb-3 js-ajax"
data-form-target="#form_populate_example"
data-ajax-url="_ajax/json_select_form_populate.json"
data-ajax-params="['action','form_populate']['param2','value2']">
<option value="">Select Option...</option>
<option value="1">Lorem Ipsum</option>
</select>
<!-- Container -->
<div id="form_populate_example" class="mt-5 p-3 bg-light rounded">
<!-- input -->
<div class="form-label-group mb-3">
<input placeholder="First Name" id="first_name" type="text" value="" class="form-control">
<label for="first_name">First Name</label>
</div>
<!-- input -->
<div class="form-label-group mb-3">
<input placeholder="Last Name" id="last_name" type="text" value="" class="form-control">
<label for="last_name">Last Name</label>
</div>
<!-- checkbox -->
<label class="form-checkbox form-checkbox-primary">
<input type="checkbox" name="checkbox" id="test_agree">
<i></i> I agree
</label>
<!-- radio -->
<div class="mb-3">
<label class="form-radio form-radio-primary form-radio-bordered">
<input type="radio" name="radio" id="radio_1" checked>
<i></i> Radio 1
</label>
<label class="form-radio form-radio-primary form-radio-bordered">
<input type="radio" name="radio" id="radio_2">
<i></i> Radio 2
</label>
</div>
<!-- textarea -->
<div class="form-label-group mb-3">
<textarea placeholder="Textarea" id="my_description" class="form-control" rows="2"></textarea>
<label for="my_description">Description</label>
</div>
<!-- select -->
<select class="form-control mb-3" id="country_id">
<option value="0">Select Country...</option>
<option value="1">United States</option>
<option value="2">Romania</option>
</select>
</div>