Несколько html select и jquery ajax

Question

Я хочу создать несколько < select> с ajax и jquery.

Первый выбор (c1) работает нормально. Когда я нажимаю на него, возвращается другой select (c2). Но когда я нажал на второй select (c2), я могу получить третий выбор (c3).

HTML:

<table><tr><td id="cat1div"> 
<select name="c1"> 
<option value="">---</option> 
<option value="1">Auto</select> 
<option value="2">Moto</select> 
</td> 
<td id="cat2div"></td> 
<td id="cat3div"></td> 
</tr></table> 

JQuery:

$(document).ready(function() { 
$("select[name=c1]").change(function() { 
var id = $("select[name=c1] option:selected").val(); 

$.ajax({ 
      url: "category.php?cat=2&id=" + id, 
      cache: false, 
      success: function (html) { 
       $('#cat2div').html(html); 
      } 
     }); 

}); 



$("select[name=c2]").change(function() { 
alert('asad'); 
var id = $("select[name=c2] option:selected").val(); 

$.ajax({ 
      url: "category.php?cat=3&id=" + id, 
      cache: false, 
      success: function (html) { 
       $('#cat3div select').html(html); 
      } 
     }); 

}); 

}); 

PHP:

<?if($_GET['cat']==2){?> 
<select name="c2"> 
<option value="">---</option> 
<?foreach($cat2[$_GET['id']] as $ca => $key){ 
?><option value="<?=$ca;?>"><?=$key;?><?}?> 
</select> 
<?}elseif($_GET['cat']==3){?> 
<select name="c3"> 
<option value="">---</option> 
<?foreach($cat3[$_GET['id']] as $ca => $key){ 
?><option value="<?=$ca;?>"><?=$key;?><?}?> 
</select> 
<? 

Извините за мой английский и спасибо за любую помощь

Answer 1

Это должно сделать трюк:

$(document).ready(function() { 
    $("select[name=c1]").change(function() { 
    $.ajax({ 
     url: "category.php?cat=2&id=" + $(this).val(), 
     cache: false, 
     success: function (html) { 
     $('#cat2div').html(html).find("select[name=c2]").change(function() { 
      $.ajax({ 
      url: "category.php?cat=3&id=" + $(this).val(), 
      cache: false, 
      success: function (html) { 
       $('#cat3div select').html(html); 
      } 
      }); 
     }); 
     } 
    }); 
    }); 
}); 

В настоящее время, когда $("select[name=c2]") работает, элемент еще не там ... так что нет ничего, чтобы связать change обработчик ... вам нужно сделать это один раз элемент является там, как я есть выше.