Chce zrobić coś takiego:
mam jeden select w którym są kategorie i po wybraniu danej kategorii zostaje wypełniony drugi select podkategoriami pobranymi z mysql-a.
Próbowałem wiele skryptów i rozwiązań to nie działały, albo działały tylko w Firefox-ie a IE nie.
Już nie wiem co robię źle.
Widać że dane są wyciągane z DB, i co dalej
skrypt js:
[code]
CODE
<script type="text/javascript">
function clean_options( id ) {
while( $(id+ " option").length > 1 ) {
$(id + " option:last").remove();
}
}
function select_options( id, tab ) {
clean_options( id ) ;
$.each(tab, function() {
$(id).append("<option value='"+$(this).attr('id')+"'>"+$(this).attr('nazwa')+"</option>");
});
}
$(document).ready( function( ) {
$("#mytest").change( function() {
$.ajax( {
type: "POST",
url: "podkategorie.php",
data: "",
dataType: "json",
success: function(result) {
tab = result.tab ;
select_options( "#pod", tab ) ;
},
error: function() {
alert("error");
}
});
}) ;
});
</script>
function clean_options( id ) {
while( $(id+ " option").length > 1 ) {
$(id + " option:last").remove();
}
}
function select_options( id, tab ) {
clean_options( id ) ;
$.each(tab, function() {
$(id).append("<option value='"+$(this).attr('id')+"'>"+$(this).attr('nazwa')+"</option>");
});
}
$(document).ready( function( ) {
$("#mytest").change( function() {
$.ajax( {
type: "POST",
url: "podkategorie.php",
data: "",
dataType: "json",
success: function(result) {
tab = result.tab ;
select_options( "#pod", tab ) ;
},
error: function() {
alert("error");
}
});
}) ;
});
</script>
skrypt php:
a teraz dane z konsoli FIREBUG-a:
CODE
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="all" type="text/css" href="style/style.css" />
<script src="js/jquery.min.js" type="text/javascript">
</script>
<title></title>
<script type="text/javascript">
function clean_options( id ) {
while( $(id+ " option").length > 1 ) {
$(id + " option:last").remove();
}
}
function select_options( id, tab ) {
clean_options( id ) ;
$.each(tab, function() {
$(id).append("<option value='"+$(this).attr('id')+"'>"+$(this).attr('nazwa')+"</option>");
});
}
$(document).ready( function( ) {
$("#mytest").change( function() {
$.ajax( {
type: "POST",
url: "podkategorie.php",
data: "",
dataType: "json",
success: function(result) {
tab = result.tab ;
select_options( "#pod", tab ) ;
},
error: function() {
alert("error");
}
});
}) ;
});
</script>
</head>
{"tab":[{"id":"50001","nazwa":"Windykacja"},{"id":"50002","nazwa":"E-biznes"},{"id":"50003","nazwa":"Publikacje"},{"id":"50004","nazwa":"Porady"},{"id":"50005","nazwa":"Ubezpieczenia"},{"id":"50006","nazwa":"Kredyty"}]}
<html>
<head>
<link rel="stylesheet" media="all" type="text/css" href="style/style.css" />
<script src="js/jquery.min.js" type="text/javascript">
</script>
<title></title>
<script type="text/javascript">
function clean_options( id ) {
while( $(id+ " option").length > 1 ) {
$(id + " option:last").remove();
}
}
function select_options( id, tab ) {
clean_options( id ) ;
$.each(tab, function() {
$(id).append("<option value='"+$(this).attr('id')+"'>"+$(this).attr('nazwa')+"</option>");
});
}
$(document).ready( function( ) {
$("#mytest").change( function() {
$.ajax( {
type: "POST",
url: "podkategorie.php",
data: "",
dataType: "json",
success: function(result) {
tab = result.tab ;
select_options( "#pod", tab ) ;
},
error: function() {
alert("error");
}
});
}) ;
});
</script>
</head>
{"tab":[{"id":"50001","nazwa":"Windykacja"},{"id":"50002","nazwa":"E-biznes"},{"id":"50003","nazwa":"Publikacje"},{"id":"50004","nazwa":"Porady"},{"id":"50005","nazwa":"Ubezpieczenia"},{"id":"50006","nazwa":"Kredyty"}]}
Pozbądź się tego w tym skrypcie.