my question is continuation of what i have asked see the link. Load Country/State/City
i have expand to load my drop downs list from db and i just need a way to wire onchange method in my first dropdownlist and second, please see the code. appreciate any help.
Append latest code:
<select id="country" onchange="getStateByCountryId()"></select> <br />
<select id="state"></select> <br />
$(document).ready(function() {
var options = {
type: "POST",
url: "SearchPage.aspx/LoadCountry",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
var returnedArray = msg.d;
country = $("#country");
country.append('<option>Select a Country</option>');
for (i = 0; i < returnedArray.length; i++) {
country.append("<option value='" + returnedArray[i].Id + "'>" + returnedArray[i].Name + "</option>");
}
}
};
$.ajax(options);
});
function getStateByCountryId() {
$("#country").change(function()
{
var _selected = $("#country").val();
var options =
{
type: "POST",
url: "SearchPage.aspx/StateBy",
data: "{'countryId':'" + _selected + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$('#state').empty();
var returnedArray = msg.d;
state = $("#state");
for (var i = 0; i < returnedArray.length; ++i) {
state.append("<option value='" + returnedArray[i].Id + "'>" + returnedArray[i].Name + "</option>");
}
}
};
$.ajax(options);
});
}
but does not populate? the way i am doing is that how you suppose to do?
thanks.
The HTML Select DropDownList has been assigned a jQuery OnChange event handler. When an item is selected in the HTML Select DropDownList, the jQuery OnChange event handler is executed within which the Text and Value of the selected item is fetched and displayed in JavaScript alert message box.
Best procedure for cases like this would be, to add a common class to all the dropdowns for which you want to call the function on change. For ex: add 'trigger-change' class for all your required dropdowns. Then below bind event should work perfect for you. $('form select.
Yes. Add an onChange property to the first select, then use it to call a javascript function you have written elsewhere.
$(this).parent("select").attr("id");
$("#state").change(function(){
//on-change code goes in here.
//variable "this" references the state dropdown element
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With