從第一個下拉列表中選擇后，如何將li值填充到另一個下拉列表中？

Question

我的問題是我可以從數據庫中獲取<li>標記的值，但無法弄清楚如何使用它使用ajax和php填充另一個下拉列表？ （我不是要創建選擇下拉列表）

我有2個下拉列表，第一個下拉列表選擇MOVIE，第二個下拉列表選擇DATE。 因此，當我選擇“電影”時，第二個下拉列表將填充我選擇的電影的日期。

我找到了使用<select>標簽和<option>標簽的解決方案。 但是，這並不能真正解決我的問題。 我真正想要做的是將圖像添加到下拉列表中。

那么如何使用下拉列表中的<ul>標記和<li>標記執行此操作？

下面是我的代碼：

HTML：

////////////////select movie//////////////////

          <div class="select_movie" style="float:left;">
                <div class="nice-select dropdown-toggle" id="selectmovie"  data-toggle="dropdown" tabindex="0" style="margin-left: 200px;  margin-top: 29px;"><span class="current">Select Movie</span>
                    <ul class="dropdown-menu scrollable-menu ul_movie" id="m_movie" >
                        <?php
                        $sql = "SELECT id,name,date,time,image FROM movie";
                        $res = mysqli_query($conn, $sql);
                        if(mysqli_num_rows($res) > 0) {
                            while($row = mysqli_fetch_object($res)) {
                                echo '<li data-value="' . $row->id . '"class="option"  style="margin-top:10px; margin-bottom:10px;"><img src="' . $row->image . '" style="width:50px; height:80px; margin-right:10px;">' . $row->name . '</li>';

                            }
                        }

                        ?>
                    </ul>
                </div>
         </div>

////////////////select date//////////////////

  <div class="select_date" style="float:left">
                <div class="nice-select dropdown-toggle" data-toggle="dropdown" tabindex="0" style="margin-left: 150px;  margin-top: 29px;"><span class="current">Select Date</span>
                    <ul class="dropdown-menu scrollable-menu ul_date" id="selectdate"  >

                    </ul>
                </div>
            </div>

使用Javascript：

 <script> $(document).on('click', '.ul_movie li', function () { // alert('movie'); var movie_id = $(this).attr('data-value'); console.log(movie_id) if(movie_id !== "") { $.ajax({ url:"get_datetime.php", data:{m_id:movie_id}, type:'POST', success:function(response) { // var resp = $.trim(response); $('.ul_date li').html(response); } }); } else { $('.ul_date li').html("<li value=''>------- Select --------</li>"); alert("tghhh") ; } }); </script> 

PHP：

 <?php include("database/conn.php"); ?>
 <?php
 if(isset($_POST['m_id'])) {
 $sql = "select `id`,`date` from movie where 
`id`='".mysqli_real_escape_string($conn, $_POST['m_id'])."'";
$res = mysqli_query($conn, $sql);
//to test what value given
echo "<option value=''>".$_POST['m_id']."</option>";
if(mysqli_num_rows($res) > 0) {
    echo "<option value=''>------- Select --------</option>";
    while($row = mysqli_fetch_object($res)) {
 //            echo "<li data-value='" . $row->id . '"class="option" >' . $row->date . '</li>';

        echo "<li data-value='".$row->id."' class='option'>".$row->date."</li>";
    }
}
else{
    echo "<option value=''>No showing time</option>";
}
} else {
header('location: ./');
 }
 ?>

Answer 1

使用$('#selectdate').html(response); 而不是$('.ul_date li').html(response);