从动态下拉列表中获取链接答案

【问题标题】：get links from dynamic dropdown从动态下拉列表中获取链接
【发布时间】：2017-08-22 16:45:56
【问题描述】：

首先我得到了这个 PHP 代码

<?php
$sqlget2 = "SELECT * FROM  `table` ORDER BY  `table`.`id` ASC ";
$sqldata2 = mysqli_query($mysqli, $sqlget2) or die('error getting data');

    while($row = mysqli_fetch_array($sqldata2, MYSQLI_ASSOC)) {
    echo '<option value="'.$row['id'].'">Episode '.$row['id'].'</option>';
}?>

在我的数据库表中，我得到了 3 行（id、stream_link、download_link）

我的目标是获取该 ID 的流和下载链接，现在在下拉列表中选择。

我希望下载链接进入：a href="download_link"

和流链接成视频标签

<video class="afterglow" id="myvideo" width="720" height="400" data-autoresize="fit">
    <source src="" type="video/mp4">
</video>

感谢您的帮助

【问题讨论】：

为什么不使用 AJAX 并使用 jQuery 的更改功能与您拥有的 select？ So when the select is changed, you run your AJAX to request for the appropriate links
欢迎来到 StackOverflow。请了解如何创建minimal, verifiable, and complete example。您的问题没有显示您尝试过的内容，因此您可以考虑查看帮助部分中的what topics can I ask about。
我的答案应该对你有用，你试试？

标签： php mysql dynamic

【解决方案1】：

您已经提到您在数据库中有值。而且您已经在执行 SELECT * ，因此当您已经从第一次提取中获得了可用的数据时，返回数据库并根据 ID 再次提取是没有意义的。所以还不如使用它，并利用 HTML5 数据属性。然后使用 Jquery 完成其余的工作。

WORKING EXAMPLE HERE

因此，使用数据属性将链接/流直接回显到选项元素上。就像这样……随便你怎么称呼他们。在这种情况下，我使用了数据链接和数据流。

<?php
 $sqlget2 = "SELECT * FROM  `table` ORDER BY  `table`.`id` ASC ";
 $sqldata2 = mysqli_query($mysqli, $sqlget2) or die('error getting data');

while($row = mysqli_fetch_array($sqldata2, MYSQLI_ASSOC)) {
 echo '<option value="'.$row['id'].'" data-link="'.$row['download_link'].'" 
 data-stream="'.$row['stream_link'].'" >Episode '.$row['id'].'</option>';
}?>

然后我会使用 Jquery 来完成剩下的工作。

 $(document).ready(function(){

   // On select list change.     
   $('select').change(function(){

       // Find selected option element
       var opt = $(this).find(":selected");

       // Alter the download link href,  with the data-link attribute, on the option
       $('.download_link').attr('href',opt.data('link'));

       // Replace stream DIV, with data-stream attribute on the option
       $('#stream').html('<video controls autoplay class="afterglow" id="myvideo" width="720" 
          height="400" data-autoresize="fit"><source src="'+opt.data('stream')+'" type="video/mp4"></video>');

   });
});

然后在你的 HTML 上只有两个元素在 select 下。数据可以替换到哪里

   <a href='' class='download_link'>Download</a>

   <div id="stream"></div>

【讨论】：

谢谢！下载有效，但对于视频，我只得到一张照片。在你的小提琴和我的页面上。
那可能是因为它没有设置为自动播放。如果您只是将“控件自动播放”添加到视频元素，它应该很好。我已经编辑了答案以包含它。还有小提琴。
不知道这是否仍然是个问题，但在将播放器 HTML 添加到您的 DOM 后，您可能必须调用 afterglow.init()。这应该启动播放器并使其工作。

【解决方案2】：

首先改变这个：

echo '<option id="selectedOption" value="'.$row['id'].'">Episode '.$row['id'].'</option>';

然后添加一个AJAX请求（我用的是jQuery）：

$('#select-div').on('change','#selectedOption',function() {
  let data = ('#selectedOption').val(),
  $.ajax({
    type: 'POST',
    url: 'your/route.php',
    data: data,
    success: function (result) {
      //do something
    },
    error: function (result) {
      //do something 
    }
  });
});

【讨论】：

这几乎不是一个答案。应该是评论
是的，我还没说完，我以为其他人已经回答过了