Javascript “添加更多字段”功能和基于第一个组合框填充第二个组合框可以为所有行插入运行

我有jqueryphp函数来添加更多字段

HTML

然后，我让jQuery在第一个组合框的基础上填充第二个组合框

html

---

每个功能都能完美运行。如何将2函数合并为1？因此，如果我单击“添加更多”按钮，则基于第一个组合框填充第二个组合框可以在下一行运行。

请停止使用不推荐的

mysql\uquot

函数；考虑使用MySQL或PDO代替。另外，您能为您的代码制作一个JSFIDLE吗？好的，谢谢您提供的信息。请尝试这里的演示：在Stack Overflow中，我们更喜欢在公共测试平台上测试，比如JSFIDLE。这很难，因为我的代码与mysql数据集成。

<div class="faculty_row">
    <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>

    <input type="text" name="message[]">
</div>

<a href="#" id="add_more">Add More</a>

jQuery(document).ready(function($){
    $("#add_more").on('click', function(e){
    e.preventDefault(); // Prevent Default the event
    var clone = $(".faculty_row").eq(0).clone(); // clone only first item
    $("#faculty_wrapper").append(clone); // append it to our form
});

<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">

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;
}