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页面中的菜单就像这样。假设select-list的值将是你的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>

您需要此代码段才能向服务器发出AJAX请求

// JavaScript
var s = document.getElementById('menu');     // reference to the <select> menu
var c = document.getElementById('content');  // reference to the content <div> 
s.onchange = function(){                     // hook the change event on <select>
  xhr = new XMLHttpRequest();
  var url = 'your-domain/' + this.value;     // here we're passing the selected value
  xhr.open("GET", url, true);
  xhr.onreadystatechange = function () { 
    if (xhr.readyState == 4 && xhr.status == 200) {  // wait for the response
      c.innerHTML = xhr.responseText;                // here it comes; populate the <div> 
    }
  };
  xhr.send(); 
};

这些是服务器端的PHP文件;它们可能包含任何有效的PHP / HTML代码

// PHP
// book.php or jurnal.php or webpage.php
echo 'anything';

Answer 2

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

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中。

我认为这就是你想要的？您需要做的就是复制函数和链接，但用日记和网页替换本书。

希望这有帮助！

Answer 3

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

让我们说有3种形式：书 2.网页期刊

为html中的所有三个创建表单，默认情况下将所有这些表单隐藏起来（为此我们将使用类＆＃34; display-none＆＃34;），之后检测下拉列表中的更改表单填充并根据需要执行操作。请看下面的代码安静，它可能有所帮助：

<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>

演示：http://jsfiddle.net/oynjj3jn/

下拉菜单选项会显示将显示的表单

3 个答案: