[英]How to populate a dropdown list by selecting the value from another dropdown list?
[英]How to populate li value into another dropdown after you select from first dropdown?
我的问题是我可以从数据库中获取<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: ./');
}
?>
使用$('#selectdate').html(response);
而不是$('.ul_date li').html(response);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.