jQuery running the function combobox populate for multiple combobox

Question

I have combobox

 <select name="search_category[]"  id="search_category_id">
    <option value="" selected="selected"></option>
    <?php
    $query = "SELECT * FROM t_category ORDER BY category_name ASC";
    $results = mysql_query($query);

    while ($rows = mysql_fetch_assoc(@$results))
    {?>
        <option value="<?php echo $rows['category_id'];?>"><?php echo $rows['category_name'];?></option>
    <?php
    }?>
</select>

<span id="show_sub_categories" align="center">

And here is the JS

jQuery(document).ready(function($){
    $('#loader').hide();
    $('#show_heading').hide();
$('#search_category_id').change(function(){
    $('#show_sub_categories').fadeOut();
    $('#loader').show();
    $.post("get_chid_categories.php", {
        parent_id: $('#search_category_id').val(),
    }, function(response){

        setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);
    });
    return false;
});

function finishAjax(id, response){
 $('#loader').hide();
 $('#show_heading').show();
 $('#'+id).html(unescape(response));
 $('#'+id).fadeIn();
} 

function alert_id()
{
if($('#sub_category_id').val() == '')
alert('Please select a sub category.');
else
alert($('#sub_category_id').val());
return false;
}

How about if I have multiple combobox with different id?

Example:

<select name="search_category[]"  id="search_category_id1">
    <option value="" selected="selected"></option>
    <?php
    $query = "SELECT * FROM t_category ORDER BY category_name ASC";
    $results = mysql_query($query);

    while ($rows = mysql_fetch_assoc(@$results))
    {?>
        <option value="<?php echo $rows['category_id'];?>"><?php echo $rows['category_name'];?></option>
    <?php
    }?>
</select>

<select name="search_category[]"  id="search_category_id2">
    <option value="" selected="selected"></option>
    <?php
    $query = "SELECT * FROM t_category ORDER BY category_name ASC";
    $results = mysql_query($query);

    while ($rows = mysql_fetch_assoc(@$results))
    {?>
        <option value="<?php echo $rows['category_id'];?>"><?php echo $rows['category_name'];?></option>
    <?php
    }?>
</select>

I want the function running for that 2 combobox. But when tried to run the code, the function only run for first combobox. (The function is populate second combobox based on first combobox).

Answer 1

You need to load the second select in the $.post.success handler. Example (untested):

$.post("get_chid_categories.php", 
    { parent_id: $('#search_category_id1').val() },
    function (response){
        loadSelect("search_category_id2", response);
    }
);

function loadSelect(id, response){
    $('#loader').hide();
    $('#show_heading').show();

    var target = $('#' + id);
    target.html(decodeURIComponent(response));
    if (!target.is(":visible")) {
        target.fadeIn();
    }
}