如何将 jquery/ajax 数据显示到选择字段中？

Question

代码：

<script>
    $(document).ready(function(){
      $(".field").change(function(){
        field = $(".field").val();
        $.ajax({
          type:"POST",
          data:{"field":field},
          url:"potential-courses.php",
          success:function(data){
            $(".course").val(data);              
          }
        });
      });
    });
  </script>

潜在课程.php

<?php
    include("conn.php");
    $field = $_POST['field'];
    $sql = "select * from course_master where field = '$field' order by course_full_name";
    $result = mysqli_query($link,$sql);
    while ($row = mysqli_fetch_array($result)) 
    {
        echo "<option value=".$row['course_short_name'].">".$row['course_full_name']."</option>";
    }
?>

html代码：

<select  name='field' class='field' id="field">
    <option value="">Select Field</option> 
    <option value='engineering'>Engineering</option>  
    <option value='law'>LAW</option>  
    <option value='medical'>Medical</option>  
    <option value='management'>Management</option>  
    <option value='pharmacy'>Pharmacy</option>
    <option value='hotel management'>Hotel Management</option>
    <option value='mass communication'>Mass Communication</option>
    <option value='agriculture'>Agriculture</option>
    <option value='architecture'>Architecture</option>
    <option value='education'>Education</option>
    <option value='paramedical'>Paramedical</option>
    <option value='design'>Design</option>
    <option value='commerce'>Commerce</option>
    <option value='film/tV/media'>Film /TV/ Media</option>
  </select>

  <select name="course" class="course">
    <option value="">Select Courses</option>
  </select>

在这段代码中，我有两个下拉列表，即

<select  name='field' class='field' id="field">

另一个是

<select name="course" class="course">

当我从“name=field”更改值时，它在“name=course”中不显示任何内容。我在哪里做错了请帮助我。

谢谢

Answer 1

改变它：

$(".course").val(data);

到

$(".course").html(data);

它会将您从 php 返回的 <option> 集合添加到您的 <select>