Javascript 下拉菜单选择将显示什么表单

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

这是下拉菜单：

<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方面的经验

为了实现你的目标，你需要以下几点

HTML页面中的菜单如下所示。假设选择列表的值将是您的PHP文件，如下所示

<!-- HTML -->
<p>Select reference type...</p>
<!-- This is the menu -->
<select id="menu">
  <option value="book.php">Book</option>
  <option value="jurnal.php">Jurnal</option>
  <option value="webpage.php">Webpage</option>  
</select>

<!-- This is the container for your HTML content -->
<div id="content"></div> 

---

好的，在不知道代码的其余部分的情况下，我建议最好的选择是将不同的表单放在不同的文档中。 比如说

HTML

记住要包括Jquery！在HTML的头部：

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

基本上，只要单击book链接，它就会将book.php加载到contentwrapper div中

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

---

希望这有帮助

您还可以将所有3个表单保留在同一页面上，并根据下拉选择隐藏或显示它们

假设有3种形式： 1.书 2.网页 3.日志

在html中为所有三个表单创建表单，并在默认情况下将它们全部隐藏（为此，我们将使用一个类“display none”），然后检测下拉列表中表单填充者的变化，并根据需要执行操作。请看下面的和平代码，它可能会有所帮助：

<style type="text/css">
    .display-none {
        display: none;
    }
</style>

<select id="dropdown" onchange="myFunction()">
    <option value="-1">-- Select --</option>
    <option value="book">Book</option>
    <option value="webpage">Webpage</option>
    <option value="journal">Journal</option>
</select>
<form id="book" class="display-none" method="post" action="where-you-want-to-post/book">
    <input type="submit" value="Submit Book" />
</form>
<form id="webpage" class="display-none" method="post" action="where-you-want-to-post/webpage">
    <input type="submit" value="Submit Webpage" />
</form>
<form id="journal" class="display-none" method="post" action="where-you-want-to-post/journal">
    <input type="submit" value="Submit Journal" />
</form>

<script type="text/javascript">

    function myFunction() {
        var allForms = document.getElementsByTagName('form');
        var dropdown = document.getElementById("dropdown");
        if (dropdown.value != "-1") {
            var form = document.getElementById(dropdown.value);
            for (var i = 0; i < allForms.length; i++) {
                allForms[i].setAttribute("class", "display-none");
            }
            form.setAttribute("class", "");
        }
    }
</script>

.显示无{
显示：无；
}
--挑选--
书
网页
杂志
函数myFunction（）{
var allForms=document.getElementsByTagName（'form'）；
var dropdown=document.getElementById（“dropdown”）；
如果（dropdown.value！=“-1”）{
var form=document.getElementById（dropdown.value）；
for（var i=0；i

---

演示：

像这样：@punithasubramaniv您的参考资料与此问题无关。该链接中给出了ajax的基本概念，并附有示例。@punithasubramaniv谢谢！这与我想做的非常相似，因为内容会根据下拉菜单的选择而改变。非常感谢！这就是我想要做的！由于我以前没有任何js方面的经验，我想知道javascript是否应该保存在“scripts.js”这样的文件中，然后作为

包含在html文档中？javascript不需要单独加载：）但是，您需要加载Google托管的jQuery（带有我输入的链接），并通过它，您不需要将脚本作为文件之一放入。但是，如果您愿意，您可以下载jQuery并按照您指定的方式加载它。或者您是指我指定的Javascript？如果你是指我放进去的那一个，你所需要做的就是像这样把它放在头上

函数bookinclude（）{$（“#contentwrapper”）.fadeOut（400）；setTimeout（函数（）{$（“#contentwrapper”）.load（“book.php”）.fadeIn（）}，400）它会工作：）谢谢！它是把你放进去的函数放在哪里。“我现在正在尝试这一点。”“CurlyProgrammer抱歉，我还不能对另一篇文章发表评论。”——“虽然他提出了一个很好的观点，但也许这是学习如何使用jQuery的一个好方法，这是一个很好的起点。HEX4949提高的分数是绝对正确的（接触良好的先生），但是如果你只使用了几个下拉列表，这很难算是世界末日吗3我希望我能早点开始使用jQuery，如果你从头到尾都在做这个项目，在某个时候，你可能需要jQuery来让生活变得更轻松？：）据我所知，您这样做的方式似乎与@Benjamin给出的解决方案有所不同，因为像“bookInclude（）”这样的函数很少需要编写？@TheCurlyProgrammer好吧，这些是完全不同的解决方案。Mine不需要任何其他外部库（jQuery或任何其他库）；我的不需要更改或注入内联javascript，我的不包含任何其他无用的函数；最后，我的代码片段得到了很好的注释；）你需要学习的就是这十行代码。。。对于任何其他Ajax请求；）@如果你想学习，那么你应该先学习标准；您不应该包含一些您不理解的200KB外部库；学习十行标准代码（在本例中是JavaScript）比复制粘贴大量您没有的代码要好。想想看……；）你提出的观点很好！您知道有什么在线资源可以帮助您更好地解释javascript/AJAX标准吗？另外，上面的AJAX请求将保存在哪里？正如在'index.php'中或在单独的文件中一样？@TheCurlyProgrammer这是最好的，请遵循页脚上的链接。记住，Ajax很简单，而且很酷。跟随那里的内容，你将能够在一周内使用它，而不必用无用的库过度加载你的文件。公平地说，现在只有grait库，但如果您不需要它们，就不应该使用它们。最后，您至少应该知道每个库都做什么
<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>

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

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

<style type="text/css">
    .display-none {
        display: none;
    }
</style>

<select id="dropdown" onchange="myFunction()">
    <option value="-1">-- Select --</option>
    <option value="book">Book</option>
    <option value="webpage">Webpage</option>
    <option value="journal">Journal</option>
</select>
<form id="book" class="display-none" method="post" action="where-you-want-to-post/book">
    <input type="submit" value="Submit Book" />
</form>
<form id="webpage" class="display-none" method="post" action="where-you-want-to-post/webpage">
    <input type="submit" value="Submit Webpage" />
</form>
<form id="journal" class="display-none" method="post" action="where-you-want-to-post/journal">
    <input type="submit" value="Submit Journal" />
</form>

<script type="text/javascript">

    function myFunction() {
        var allForms = document.getElementsByTagName('form');
        var dropdown = document.getElementById("dropdown");
        if (dropdown.value != "-1") {
            var form = document.getElementById(dropdown.value);
            for (var i = 0; i < allForms.length; i++) {
                allForms[i].setAttribute("class", "display-none");
            }
            form.setAttribute("class", "");
        }
    }
</script>