根据一个div到第二个div的结果显示页面内容[关闭]

I have a question.

I have two divs next to each other. In div1 I have created a dropdown menu (10 options available) with php which allows me to open another page; based on what the user chooses.

My question is: instead of opening another page could I display the content of that page inside the second div, aka div2?

If yes, how do you do it?

More details about the issue: practically inside the drop-down menu are 10 options available. so if you choose option 1 it opens page 1, if 2 it opens page 2 etc... so total 10 options linking to 10 different pages. My question is: instead of opening 10 pages separately how can I display the results inside a div next to the drop-down menu :-)

something like loading content/pages dynamically (inside the div) without having to leave the page,

I thank you in advance.

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

You can use iframe if you want to load the page inside the second div, on change of the option of first div. Second use ajax call on change of the drop down and load the content dynamically.

You could use an <iframe> tag. For example:

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

Adjust to your own benefit.