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

Question

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.

Answer 1

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