在动态控制页面方面需要帮助答案

【问题标题】：Need help with controlling a page dynamically在动态控制页面方面需要帮助
【发布时间】：2025-12-03 20:25:02
【问题描述】：

我正在寻找一个页面，用户将在其中做出选择，例如：“您的计算机有多旧？” - “一年”，“两年”等，页面将删除并添加“选项”（目前只需要是文本的信息部分）

有什么办法可以做这样的事情吗？

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

提前致谢！

【问题讨论】：

不太清楚你想做什么，但我猜你想根据选择中的选定选项显示内容。你可以用 javascript 做到这一点。

标签： php javascript html css

【解决方案1】：

PHP 无法检测到页面是否已被更改，您必须使用 Javascript 来检测。

如果您使用的是 HTML 选择元素并且想要动态创建内容，它可能看起来像这样：
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;

【讨论】：

如果可能的话，我试图避免使用 java-script，但它不会发生，不是吗？哈哈感谢您惊人的快速响应和代码！
使用你放在那里的非动态选项，是否可以加倍使用，并有两个或多个选择器删除/显示不同的东西？
当然可以。您可以复制代码并更改 select 元素的 ID（与第一个 Javascript 变量相同。以及内容 var。
我尝试了非动态代码，但它什么也没做..？我只是将它们放在同一个文件中（显然将脚本放在首位并放在适当的标签中）有什么建议吗？
对不起，里面有错误。我还将代码包装在一个 init 函数中，该函数将在页面加载时触发。编辑好的代码在上面，现在应该可以工作了！

【解决方案2】：

我认为您正在将一些东西混合在一起。据我了解，您希望根据用户在下拉列表中选择的内容来显示或隐藏页面的某些部分。

PHP 制作了“动态网页”，这是真的。但这样做的意义在于，该页面可以针对每个请求提供不同的内容。但是，一旦提供了内容，它就会在客户端呈现，而不再由 PHP 掌握。

如果您想在不重新加载整个页面的情况下更改内容，您应该使用 javascript。
您也可以使用 ajax 提供新内容，但我认为您只想将一些 div 的 display 属性添加到 none 或类似的东西。

【讨论】：

哈哈，对不起，我忘了我在标题中写了PHP。我真正的意思是我主要将 PHP 用于网站作为我的主要技术，我知道 PHP 更多地被用作抓取各个部分然后将它们显示为静态页面的一种方式。