Множественный выбор HTML и JQuery AJAX

Question

Я хочу создать множественный

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

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 с ... вам нужно сделать это, когда элемент равен там, как у меня выше.