javascript - 三个下拉事件更改不起作用

Question

我试图在第一个下拉列表更改时填充第二个下拉列表，并在第二个下拉列表更改时填充第三个下拉列表。

这是我的代码:

$("#categories").change(function() {
    var cat = $('#categories').val();
    alert();

    $.ajax({
            method: "POST",
            url: "get_partner.php",
            data: {
                'categlist': cat
            }
        })
        .done(function(data) {
            $("#patner").remove();
            $("#cbselect").prepend(data);

        });

});
$('#patner').change(function() {
    alert();
});

当第一个下拉列表更改时，警报工作正常，但第二个下拉列表更改时不会发生任何警报。

这是下拉菜单的 HTML:

<div id='cbselect'><select class="input-large m-wrap" tabindex="1" id="categories" name="categlist" >
   <option value="0"> Select Category</option>
</select></div>
<select class="input-large m-wrap" tabindex="1" id="patner" name="patner" >
   <option value="0"> Select Partner</option>
</select>
<select class="input-large m-wrap cbs" tabindex="1" id="outlet" name="outlet" >
   <option value="0"> Select Outlet</option>
</select>

Answer 1

这会起作用， 这样使用ajax。

$.post(
  'get_partner.php',
  {'categlist': cat},
  function(ret_data){
    $('#patner').html(ret_data); /* Take even the select Partner option from the ajax page */
  }
);