Merhaba arkadaşlar,

jqueryde dinamik select box form yapmaya çalışıyorum ama tekıldığım bir nokta var;

append ile marka select formuna optionları ekliyorum:

$('#marka').append("<option>"+marka[0]+"</option>","<option>"+marka[1]+"</option>","<option>"+marka[2]+"</option>","<option>"+marka[3]+"</option>");

sonra change fonksiyonu ile marka form a tıklanınca seçilen markayı val ile alıp seri form a tekrar append ile bir option ekleyip hide olan seri form u açmak istiyorum ama neler denediysem olmadı

$('#marka').change(function(){
        var marka = $('#marka').val();
         $('#seri').append("option>seri</option>");
         $("div.seri").show(500);
        });

sizce nerede hata yapıyorum ?


tam kodlar:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("div.seri").hide(500);
$("div.model").hide(500);
//otomobil markaları
var marka = ['opel','bmw','fiat','ford'];
//otomobil serileri
var opel = ['astra','insigna','corsa'];
var bmw = ['1 serisi','2 serisi','3 serisi'];
var fiat = ['albea','linea','punto'];
var ford = ['mondeo','fiesta','focus'];
        
$('#marka').append("<option>"+marka[0]+"</option>","<option>"+marka[1]+"</option>","<option>"+marka[2]+"</option>","<option>"+marka[3]+"</option>");


$('#marka').change(function(){
        var marka = $('#marka').val();
         $('#seri').append("option>seri</option>");
         $("div.seri").show(500);
        });	
		
$('select#seri').change(function(){
	var seri = $('#seri').val();
	$("div.model").show(500);
	});
        


        
        
       


});
</script>
<style type="text/css">
div {
  border: 2px solid #F00;
}
</style>
</head>


<body>


<p>&nbsp;</p>
<form id="otomobil" name="otomobil" method="post" action="">
 <div class="marka">
  <p>Marka :
    <select name="marka" id="marka">
     
    </select>
  </p>
</div>


<div class="seri">
  <p>Seri :
  <select name="seri" id="seri">
    <option>SERİSİNİ SEÇİNİZ</option>
    <option>vectra</option>
    <option>astra</option>
  </select>
  </p>
  </div>
  <div class="model">
  <p>Model :
<select name="model" id="model">
      <option>MODELİNİ SEÇİNİZ</option>
      <option>2.0</option>
      <option>1.6</option>
      <option>comford</option>
      <option>comford line</option>
    </select>
  </p>
  </div class="son">
  <div>
  <p>
    <label for="baslik">Başlık:</label>
    <input name="baslik" type="text" id="baslik" value="" /> 
    *Tamamı büyük harflerden oluşan başlık seçmeyiniz.<br />
    <label for="aciklama">Açıklama:</label>
    <textarea name="aciklama" id="aciklama" cols="45" rows="5"></textarea>
  </p>
  <p>
    <label for="resimler">İlan fotoğrafları:</label>
    <input type="file" name="resimler" id="resimler" value="Seç" />
    * 
    Sadece jpg, jpeg, gif ve png formatını destekler. Her fotoğraf en fazla 1 mb olabilir.
  </p>
  </div>
</form>
     
</body>
</html>