javascript - 下拉菜单选择决定将显示什么表单

Question

我目前正在开发一个项目，该项目将不同类型对象的详细信息保存到数据库中，例如书籍、网页和期刊文章。为了保存这些对象的不同属性，我试图根据下拉菜单中的选择来显示不同的表单。

这是下拉菜单:

<div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
            Select Reference Type...
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="book.php">Book</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="journal.php">Journal</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="webpage.php">Webpage</a></li>
        </ul>
    </div>

如何在屏幕上加载不同的表单而不重定向到不同的页面。我一直在尝试在 php 中执行此操作，但我感觉 php 不是执行此操作的正确方法。另外，提前致歉，因为我以前没有 Javascript、AJAX 或 jQuery 的经验。

Answer 1

好吧，所以在不知道其余代码的情况下，我建议最好的选择是将不同的表单放在单独的文档中。 例如

HTML

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        Select Reference Type...
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a onclick="bookinclude()" role="menuitem" tabindex="-1" href="book.php">Book</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="journal.php">Journal</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="webpage.php">Webpage</a></li>
    </ul>
</div>
<div id="contentwrapper">
    Some Initial Content Here
</div>

Javascript

function bookinclude(){
  $("#contentwrapper").fadeOut(400);
  setTimeout(function(){$("#contentwrapper").load("book.php").fadeIn();}, 400); 
};

并记住包含 Jquery!在 HTML 的头部:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

基本上，单击书籍链接时，它会将 book.php 加载到 contentwrapper div 中。

我想这就是你想要的？您所需要做的就是复制该功能和链接，但用日记和网页替换书籍。

希望这有帮助!