I have this code:
<script type="text/javascript">
$(document).ready(function(){
$("select#type").attr("disabled","disabled");
$("select#model").attr("disabled","disabled");
$("select#category").change(function(){
$("select#type").attr("disabled","disabled");
$("select#type").html("<option>Please wait...</option>");
var id = $("select#category option:selected").attr('value');
$.post("../select_type.php", {id:id}, function(data){
$("select#type").removeAttr("disabled");
$("select#type").html(data);
});
});
$("select#type").change(function(){
$("select#model").attr("disabled","disabled");
$("select#model").html("<option>Please wait...</option>");
var id2 = $("select#type option:selected").attr('value');
$.post("../select_model.php", {id2:id2}, function(data){
$("select#model").removeAttr("disabled");
$("select#model").html(data);
});
});
$("form#select_form").submit(function(){
var cat = $("select#category option:selected").attr('value');
var type = $("select#type option:selected").attr('value');
var model = $("select#model option:selected").attr('value');
if(cat>0 && type>0 && model >0)
{
var model = $("select#model option:selected").html();
var type = $("select#type option:selected").html();
$("#result").html('<br>Your choice: ' + type + ' ' + model + '.');
}
else
{
$("#result").html("<br>You have to fill every field!");
}
return false;
});
});
It is a 3 level cascading dropdown menu system, fetches datas from database with PHP. My problem is, whenever I reach the third level (continents -> countries -> cities for example), and I change the continent to some other or "Not selected" the other 2 levels won't reset. They should be inactive and resetted while the continent select input does not have any value selected. How could I solve this?
in $("select#category").change()
disable/empty the #model as well, and check for the selected value before doing the ajax request and enabling the #type select.