如何根据另一个选择选项附加和删除选择选项

Question

我有2个选择组件，一个用于类别，另一个用于伙伴。合作伙伴选择选项应根据类别选项上用户选择的选项类型而变化。在javascript部分中，我使用过警报来检查该选项是否已删除。以下代码首次可以正常运行。但是在该伙伴选择之后，不会改变

$('#pageCategory').on('selectmenuchange', function() {
 
        
        var partnerCategory = "${partnerCategory}";
        
        var categoryVal = $(this).val();
        //alert("cat = "+categoryVal+" pat = "+partnerCategory);
        var keyIndex = partnerCategory.indexOf(categoryVal);
        alert("key index = "+keyIndex);
        var firstOpeningIndex = 0.1;
        var firstClosingIndex;
        var subStringList = "";
        var subStringArray = "", count = 0;
        
        //finding the first occurrence of [
        if(keyIndex != -1)
        {
            for(var i = keyIndex; i < partnerCategory.length; i++)
        {
            if(partnerCategory.charAt(i) == "[")
                firstOpeningIndex = i;
            //opening brace has found
            if(firstOpeningIndex != 0.1)
            {
                if(partnerCategory.charAt(i) == "]")
                {
                    firstClosingIndex = i;
                    break;
                }    
                
            }
            
        }
        
        //substring from the partnerCategory 
        subStringList = partnerCategory.substring(firstOpeningIndex+1, firstClosingIndex);
        subStringArray  = subStringList.split(",");
        
        alert("array = "+subStringArray);
        
        $("#pagePartner >option").each(function(){
            if(count != 0)
            {
                alert("entered");
                $(this).remove();
            }
            count++;
            
        });
        $("#pagePartner >option").each(function(){
            alert("del val = "+$(this).val());
        });
        for(var i = 0; i < subStringArray.length; i++)
        {
            $("#pagePartner").append("<option>"+subStringArray[i]+"</option>");
            
        }
        //display
        
        $("#pagePartner >option").each(function(){
            alert("val = "+$(this).val());
        });
        
    }
        else{
            alert("Partner not available");
        }
        
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="col-md-3">
                    <label>Partner</label><span class="mandatory_star">*</span>
                    <fieldset class="infield">
                        <form:select path="pagePartner" id="pagePartner"   >
                            <form:option value="-1">Select Partner</form:option>
                            <form:options items="${partnerList}"/>
                        </form:select>
                    </fieldset>
                </div>
                
                
<div class="col-md-3">
                     <label>Category</label><span class="mandatory_star">*</span>
                     <fieldset class="infield">
                         <form:select path="pageCategory" id="pageCategory" >
                            <form:option value="-1">Select Category</form:option>
                            <form:options items="${categoryList}"/>
                         </form:select>
                      </fieldset>
                     
                     
                </div>