需要创建列表，每个li都需要是一个pdf页面的链接

Question

所以一位客户问我是否可以在他的网站上制作一个下拉列表，下拉列表不是问题，问题是每个

<li>

都需要是指向PDF文件不同页面的链接。 问题是我不知道这是否是一件容易实现的事情，或者是否因为我的知识而可能。 另一个问题是，有问题的网站是一个 WordPress 网站，我对 WordPress 的了解更少，我试图改变我老板对 WordPress 的看法，但我需要一个工作组件的示例，另一个问题是我几乎没有没有时间去做，但如果我能有一个工作组件，也许我可以改变老板对自由编码的心态。

我尝试搜索组件和/或 WP 插件，但没有找到制作方法

Answer 1

如果我正确理解问题，当用户单击列表中的元素时，您需要打开 PDF 文件吗？

如果是这样，您可以使用以下方法来解决您的问题：

<label for="pdfs">Choose a pdf:</label>

<select name="pdfs" id="pdfs">
  <option value="file_1">File 1</option>
  <option value="file_2">File 2</option>
  <option value="file_3">File 3</option>
  <option value="file_4">File 4</option>
</select>

<script>
const select = document.getElementById("pdfs");

select.addEventListener("change", (event) => {
  const pdfFile = event.target.value;
  window.open(`./pdfs/${pdfFile}.pdf`, '_blank');
});
</script>

您可以对 li 元素执行相同的操作。

<p>PDFs:</p>

<ul>
  <li><a href="/pdf_1.pdf">PDF 1</a></li>
  <li><a href="/pdf_2.pdf">PDF 2</a></li>
  <li><a href="/pdf_3.pdf">PDF 3</a></li>
  <li><a href="/pdf_4.pdf">PDF 4</a></li>
</ul>

或者使用PHP模板引擎：

<label for="pdfs">Choose a pdf:</label>

<select name="pdfs" id="pdfs">
  <?php for(let i = 1; i <= 4; i++): ?>
  <option value="file_<?=i?>">File <?=i?></option>
  <?php endfor; ?>
</select>

<script>
const select = document.getElementById("pdfs");

select.addEventListener("change", (event) => {
  const pdfFile = event.target.value;
  window.open(`./pdfs/${pdfFile}.pdf`, '_blank');
});
</script>