根据一 div 到一秒 div 的结果显示页面内容

Question

我有一个问题。

我有两个 div 彼此相邻。在 div1 中，我用 php 创建了一个下拉菜单（有 10 个选项），它允许我打开另一个页面；基于用户的选择。

我的问题是：我可以在第二个 div 又名 div2 中显示该页面的内容，而不是打开另一个页面吗？

如果是，你是怎么做到的？

有关此问题的更多详细信息：实际上，下拉菜单中有 10 个可用选项。因此，如果您选择选项 1，它会打开第 1 页，如果选择 2，它会打开第 2 页，依此类推...因此总共有 10 个选项链接到 10 个不同的页面。我的问题是：不是单独打开 10 个页面，而是如何在下拉菜单旁边的 div 中显示结果 :-)

无需离开页面即可动态加载 content/pages（在 div 内），

先谢谢你了。

Answer 1

如果要在第二个 div 中加载页面，则可以使用 iframe，并更改第一个 div 的选项。第二次使用 ajax 调用下拉列表的更改并动态加载内容。

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
function change_page(page) 
{   
    if(page!='')
    {
        $.ajax(
        {
            url : page,
            type : "post",
            success : function(data)
            {
                console.log(data);
                $("#div_page").html(data);
            }
        })
    }
}
</script>

<select id="sel_page" onchange="change_page(this.value)">
    <option value="">Choose page</option>
    <option value="callback.html">Page 1</option>
    <option value="page2.html">Page 2</option>
    <option value="page3.html">Page 3</option>
</select>

<div id="div_page"></div>

Answer 3

您可以使用 <iframe> 标签。例如：

<?php
$newpageurl = "example.com"; //URL to be opened
$dropdowntext = <<<EOT
    <div id="div1">
        <select></select>
    </div>
    <div id="div2">
        <!--This displays the chosen URL in the <div>-->
        <iframe src="$newpageurl"></iframe>
    </div>
EOT;

print $dropdowntext;
?>

根据自己的利益进行调整。

根据一 div 到一秒 div 的结果显示页面内容

Display contents of pages based on the results of one div to a second div

html

php

dropdown

display