I'm working with ajax forms where based on a select element value change, an ajax request is sent to the server, then in response a json string is returned. I build the second form based on this json string. the problem is I want to make a third select element based on second select element value change(the one that is generated via javascript). in this situation when i want to work with change event, it doesn't work:
My javascript code so far:
jQuery("#make").on('change',function(){
var value = jQuery(this).val();
if(value != 0)
{
jQuery.getJSON("<?php echo site_url('ajax/get/models'); ?>",
{makeId:value},
function(data){
if(data != "false")
{
var modelsSelect = document.createElement('select');
modelsSelect.setAttribute('name','model');
modelsSelect.setAttribute('id','model');
var modelOption = document.createElement('option');
modelOption.setAttribute('value',0);
modelOption.appendChild(document.createTextNode("sample text"));
modelsSelect.appendChild(modelOption);
jQuery.each(data, function(index, item) {
var modelOption = document.createElement('option');
modelOption.setAttribute('value',item.id);
modelOption.appendChild(document.createTextNode(item.model.toString()));
modelsSelect.appendChild(modelOption);
});
jQuery("#model").replaceWith(modelsSelect);
return false;
}
else
{
return false;
}
}
);
}
else
{
var modelsSelect = document.createElement('select');
modelsSelect.setAttribute('name','model');
modelsSelect.setAttribute('id','model');
modelsSelect.setAttribute('disabled','disabled');
var modelOption = document.createElement('option');
modelOption.setAttribute('value',0);
modelOption.appendChild(document.createTextNode("sample text"));
modelsSelect.appendChild(modelOption);
jQuery("#model").replaceWith(modelsSelect);
return false;
}
});
jQuery("#model").on('change',function(){
alert("change");// THIS DOES NOT WORK
return false;
});