append() in jquery not woring-CodePudding

I am new to jquery and ajax. I really need you help.

I have two select box, one dynamically add options to a select when the first select box is checked. I used ajax to dynamically get those values. I am getting values correctly from database. But when I try to append these options inside second select box it is not working. My code is below

    $(document).ready(function() {
       
        $("#categories").change(function() {
            
            var categoryId = $("#categories").val();
            //alert(categoryId);
            if(categoryId == 2) {
                
                $.ajax({                    
                    url: "<?= base_url();?>Web/getRateType",
                    method: "POST",
                    dataType: "json",
                    success:function(data) {
                        //alert(data[0].status);


                        $("#rate_container").css('display', 'block');
                        $("#expected_salary_container").css('display', 'none');
                        $("#rate_categories").empty();

                       // var str = '<label>Rate*</label></br>';
                        //str  = '<select name="rate_categories" style="font-size:15px" id="rate_categories"><option value="0">Select</option>';
                        var str = '';
                        $.each(data, function(key, value) {
                            //alert(value['rate_id']);
                            str  ='<option value="'  value['rate_id']  '">'  value['rate_cat_name']  '</option>';  
                        });
                       alert(str);
                        //str  = '</select>';
                        var x = $("#rate_categories").append(str);
                        if(x){
                            alert(x);
                        }
                    }
                });//$("#rate_categories").append('<option value="'  value.rate_id  '">'  value.rate_cat_name  '</option>');
            }
            else if (categoryId == 1) {
                document.getElementById("expected_salary_container").style.display = "block";
                document.getElementById("rate_container").style.display = "none";
            }
            else{
                document.getElementById("expected_salary_container").style.display = "none";
                document.getElementById("rate_container").style.display = "none";
            }
        });

<div class="col-lg-6 col-md-6">
<div class="form-group">
<label>Job Type*</label>
<select name="categories" id="categories">
<option value="0">Select</option>
<?php foreach($categories as $key => $value) { ?>
<option value="<?php echo $value['type_id']; ?>"><?php echo $value['cat_name']; ?></option>
<?php } ?>
</select>
</div>
</div>


<div class="form-group">
<label>Rate*</label>
    <select id="rate_categories" name="rate_categories">
        <option value="0">Select</option>
    </select>
</div>

here alert(x) is working fine. but the html is not appending inside select box. could anybody please help

CodePudding user response：

You are calling the ready function before the jQuery JavaScript is included. Reference jQuery first. However please check the network tab JS file load.

You should put the references to the jquery scripts first.

<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>

Please use compatible new jquery CDN Url in above script tag.