Question

我有一个问题。

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

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

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

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

类似于动态加载内容/页面（在div内），而不必离开页面

我提前感谢你。

Answer 1

如果要在第一个div选项的更改中加载第二个div内的页面，可以使用iframe。第二次使用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的结果显示页面内容

3 个答案: