动态创建选择框，并根据第一个选择框的选定值在第二个选择框中显示选项

Question

您好我正在尝试使用javascript在用户点击按钮时创建类别和子类别的选择框。用户可以根据需要创建多个选择框。我还想根据从第一个选择框中选择的类别显示子类别。 使用javascript创建选择框我使用以下代码：

<div class="row" id="catparent">
<div class="col-sm-4">
    <div class="form-group">
        <select class="form-control" name="category_name[]" id="_category" onchange=populateSubcat('_subcategory',this.selectedIndex)></select>
        </div>                  
    </div>
<div class="col-sm-4">
    <div class="form-group">
        <select class="form-control" name="subcategory_name[]" id="_subcategory"></select>
    </div>
</div>                  
   </div>
   <button class="button button_style" id="addcategory" style="min-width:225px">add another category </button>

     <script>
       jQuery(function($) {
         var scntDiv3 = $('#categorysection');
        var k = $('#categorysection #catparent').size() + 1;
        $('#addcategory').on('click', function() {
                $('<div class="row" id="catparent"><div class="col-sm-4"><div class="form-group"><select class="form-control" name="category_name[]" id="_category" onchange=populateSubcat("_subcategory",this.selectedIndex)></select></div></div><div class="col-sm-4"><div class="form-group"><select class="form-control" name="subcategory_name[]" id="_subcategory"></select></div></div><div class="col-sm-4"><div class="form-group"></div> <a href="#" id="remcategory">Remove</a></div></div>').appendTo(scntDiv3);
                k++;
                return false;   
        });
        $('#remcategory').live('click', function() { 
                if( k > 2 ) {
                        $(this).parents('#catparent').remove();
                        k--;
                }
                return false;
        }); 
});
</script>


<script>
// categories
var country_arr = new Array("category 1","category 2","category 3");

// Subcategory


var s_a = new Array();
s_a[0] = "";
s_a[1] = "category 1 - subcategory 1|category 1 - subcategory 2|category 1 - subcategory 3";
s_a[2] = "category 2 - subcategory 1|category 2 - subcategory 2|category 2 - subcategory 3";
s_a[3] = "category 3 - subcategory 1|category 3 - subcategory 2|category 3 - subcategory 3";


populateCat('_category', "_subcategory");

function populateSubcat(countryElementId, stateElementId) {

    var selectedCountryIndex = document.getElementById(countryElementId).selectedIndex;

    var stateElement = document.getElementById(stateElementId);

    stateElement.length = 0; // Fixed by Julian Woods
    stateElement.options[0] = new Option('Select Subcategory', '');
    stateElement.selectedIndex = 0;

    var state_arr = s_a[selectedCountryIndex].split("|");

    for (var i = 0; i < state_arr.length; i++) {
        stateElement.options[stateElement.length] = new Option(state_arr[i], state_arr[i]);
    }
}


function populateCat(countryElementId, stateElementId) {
    // given the id of the <select> tag as function argument, it inserts <option> tags
    var countryElement = document.getElementById(countryElementId);
    countryElement.length = 0;
    countryElement.options[0] = new Option('Select Category', '-1');
    countryElement.selectedIndex = 0;
    for (var i = 0; i < country_arr.length; i++) {
        countryElement.options[countryElement.length] = new Option(country_arr[i], country_arr[i]);
    }

    // Assigned all countries. Now assign event listener for the states.

    if (stateElementId) {
        countryElement.onchange = function() {
            populateSubcat(countryElementId, stateElementId);
        };
    }
}
</script>

此代码仅填充第一个选择框中的选项。单击“添加类别”按钮后，此代码将创建空的选择框。请帮我解决。谢谢。