选择标记

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会将id为classdata的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);
});

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

希望这有帮助。