需要有关动态控制页面的帮助

Question

我正在制作一个页面，用户可以选择例如：“你的电脑多大了？” - “一年”，“两年”等等，页面将删除并添加“选项”（目前只需要提供信息部分的文字）

有没有办法做那样的事情？

我使用的技术是PHP，当然还有HTML和CSS来设置页面样式。

提前致谢！

Answer 1

我认为你把一些东西混合在一起。根据我的理解，您希望显示或隐藏页面的某些部分，具体取决于用户在下拉列表中选择的内容。

PHP使“动态网页”成为现实。但是这样做的是页面可以在每个请求上提供不同的内容。但是一旦内容被提供，它就会在客户端呈现，而不再在PHP手中呈现。

如果您想在不重新加载整个页面的情况下更改内容，则应使用javascript 你也可以使用ajax服务新内容，但我想你只想把一些div的display属性放到none或类似的东西。

Answer 2

PHP无法检测是否对页面进行了更改，您将不得不使用Javascript。

如果您使用的是HTML select元素，并且想要动态创建内容，则可能如下所示：
的 HTML

<select id="computerAge">
    <option>2 years</option>
    <option>3 years</option>
</select>

<div id="dynamicContent">
</div>

<强>的Javascript

var computerAge = document.getElementById('computerAge');
var dynamicContent = document.getElementById('dynamicContent');

computerAge.onchange = function()
{
    // Get a list of the current dynamic content
    var contents = document.getElementById('content').document.getElementsByTagname('p');

    // Remove current dynamic content
    for(i = 0; i < contents.length; i++)
    {
        dynamicContent.removeChild(contents[i]);
    }

    // Create new dynamic content
    var dynamicP = document.createElement('p');

    if(computerAge.value == '2 years')
    {
        dynamicP.innerHTML = 'Content for 2 year old computer';
        dynamicContent.appendChild(dynamicP);
    }
    elseif(computerAge.value == '3 years')
    {
        dynamicP.innerHTML = 'Content for 3 year old computer';
        dyanmicContent.appendChild(dynamicP);
    }
}

或者，如果您没有动态创建元素：

<强> HTML

<select id="computerAge">
    <option>2_years</option>
    <option>3_years</option>
</select>

<div id="content">
    <div id="2_years" style="display: none">
        <p>Content for 2 year old computer</p>
    </div>  

    <div id="3_years" style="display: none">
        <p>Content for 3 year old computer</p>
    </div>
</div>

Javascript

function init()
{
    // Get the select element
    var select = document.getElementById('computerAge');

    select.onchange = function()
    {
        // Get the elements which could be the dynamic content
        var content = document.getElementById('content')
        var contents = content.getElementsByTagName('div');

        // Iterate over contents; make selected visible and hide others
        for(i = 0; i < contents.length; i++)
        {
            if(contents[i].id == select.value)
            {
                contents[i].style.display = 'block';
            }
            else
            {
                contents[i].style.display = 'none';
            }
        }
    }
}

window.onload = init;