You can put a listener on the drop-down to change the data source for the autocomplete with something like the code below.
- The code manipulates the first drop-down and text input on the page. The selectors may need to be modified if you questions are in different positions.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Assign some vars
var qProvince = $('.list-dropdown:first');
var qDistrict = $('.text-short:first');
var selectedProvince;
// The districts
var provinceDefault = "".split(',');
var province1 = "Anacuabe,Balama,Chiúre,Ibo,Macomia,Mecufi,Meluco,Mocímboa da Praia,Montepuez,Mueda,Muidumbe,Namuno,Nangade,Palma,Pemba Metuge,Quissanga".split(',');
var province2 = "BileneMacia,Chibuto,Chicualacuala,Chigubo,Chókwè,Guijá,Mabalane,Manjacaze,Massangena,Massingir,Xai-Xai".split(',');
var province3 = "Funhalouro,Govuro,Homoine,Jangamo,Inharrime,Inhassoro,Mabote,Massinga,Morrumbene,Panda,Vilankulo,Zavala".split(',');
// Initial data source for the autocomplete
switch($('select', qProvince).val()) {
case '1':
selectedProvince = province1;
break;
case '2':
selectedProvince = province2;
break;
case '3':
selectedProvince = province3;
break;
default :
selectedProvince = provinceDefault;
break;
}
// Apply autocomplete to the text input
$('input.text', qDistrict).autocomplete({
source: selectedProvince
});
// Listener on the dropdown
$('select', qProvince).change(function() {
// Clear the text input
$('input.text', qDistrict).val('');
// Define the new data source
switch($(this).val()) {
case '1':
selectedProvince = province1;
break;
case '2':
selectedProvince = province2;
break;
case '3':
selectedProvince = province3;
break;
default :
selectedProvince = provinceDefault;
break;
}
$('input.text', qDistrict).autocomplete('option','source',selectedProvince);
});
});
</script>
Topic Author
