jQuery中的append（）不起作用

Question

我是 jquery 和 ajax 的新手。我真的需要你的帮助。

我有两个选择框，一个在选中第一个选择框时动态添加选项。我使用 ajax 来动态获取这些值。我从数据库中正确获取值。但是，当我尝试将这些选项附加到第二个选择框中时，它不起作用。我的代码如下

    $(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>

这里的 alert(x) 工作正常。但 html 没有附加在选择框内。有人可以帮忙吗

标头中引用了jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

Answer 1

您在包含 jQuery JavaScript 之前调用了 ready 函数。首先参考jQuery。但是请检查网络标签 JS 文件加载。

你应该把对 jquery 脚本的引用放在第一位。

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

请在上面的脚本标签中使用兼容的新jquery CDN Url。

Answer 2

检查下面的代码，看看它是否适合您。我已将原版 JS 更改为 jQuery。您可能需要重新插入您的 php 代码。

$(document).ready(function() {

  //Hide everything
  $("#expected_salary_container, #rate_container").hide();


  $("#categories").change(function() {

    var categoryId = $("#categories").val();
    console.log(categoryId);
    //alert(categoryId);
    if (categoryId == 2) {

      let data = ["Item 1", "Item 2", "Item 3"];
      str = "";
      $.each(data, function(key, value) {
        //alert(value['rate_id']);
        str += '<option value="' + value + '">' + value + '</option>';
        console.log(str);
      });
      var x = $("#rate_categories").append(str);

      $("#expected_salary_container").hide();
      $("#rate_container").show();

    } else if (categoryId == 1) {
      $("#expected_salary_container").show();
      $("#rate_container").hide();

    } else {
      $("#expected_salary_container").hide();
      $("#rate_container").show();
    }

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

      <option value="2">Cat 1</option>
      <option value="1">Cat 2</option>
      <option value="2">Cat 3</option>

    </select>
  </div>
</div>


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

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