div内选择标签

Question

HTML：

<div class="row">
  <div class="form-group">

    <div class="col-xs-10">
      <label for="class_code_reservation">Class Code</label>
      <select type="text" class="form-control" id="class_code_reservation" name="class_code_resevation" autocomplete="off">
        <div id="classdata"></div>
      </select>
    </div>


    <div class="col-xs-2">
      <a href="class_list_form.php" target="_blank"> <span class="glyphicon glyphicon-list-alt"></span> view class list</a>
      <br>
      <br>
      <br>
    </div>

  </div>
</div>

PHP：

include "connect_database.php";
$course =$_POST['course'];
$fetchquery = "SELECT * FROM `class` WHERE course = '$course'";
$fetch = mysqli_query($conn, $fetchquery);
while ($rows = mysqli_fetch_assoc($fetch)) {
    echo "<option value=".$rows['class_code']." >".$rows['class_code']."      </option>";
}

JavaScript：

function classcode() {
  var course = $('#course_reservation').val();
  $.ajax({
    type: "POST",
    url: "reservation_class_code.php",
    data: "course=" + course
  }).done(function(data) {
    alert(data)
    $('#classdata').html(data);
  });
}

我想根据用户使用ajax选择的内容来填充下拉选项，但Dreamweaver会用一个classdata的ID突出显示div作为错误。

Answer 1

您不应该在select中使用div标签。 请改用选项标签。

<option>Example</option>
<option>Example1</option>

Answer 2

如下修改您的ajax调用

function classcode() {
  var course = $('#course_reservation').val();
  $.ajax({
    type: "POST",
    url: "reservation_class_code.php",
    data: "course=" + course
  }).done(function(data) {
    $('#class_code_reservation').html(data);
  });
}

然后从HTML中删除<div id="classdata"></div>

Answer 3

尝试改用以下代码：

$.post('reservation_class_code.php', {course: course}, function( data ) {
     $('#class_code_reservation').html(data);
});

这将发送带有参数course的发布请求，并将结果数据附加到ul标签class_code_reservation 。

希望这可以帮助。