javascript - 如何根据选择输入使用javascript更改页面内容？

Question

假设我有一个这样的网页:

    <div style="margin:auto;text-align:center;padding-top:10px;">
    <form action="" method="POST">
        <p style="text-align:center;">
        <select>
            <option value="blogs">blogs.php</option>
            <option value="portfolio">portfolio.php</option>
            <option value="contact">contact.php</option>
            <option value="home">home.php</option>
        </select>
        </p>
        <p style="text-align:center;">
            <input type="submit" name="submit" value="Submit"/>
        </p>
    </form>
</div>

<div class="pagetitle">
    <h5>Option Value (for example blogs)</h5>
</div>

如您所见，用户可以从选择菜单中的 4 个选项中进行选择。我想知道，有什么办法可以改变这个div的内容=> <div class="pagetitle">与 javascript onsubmit ？例如，如果用户选择 blogs.php ，则 h5 标记将更改为 <h5>blogs</h5> &如果他选择portfolio.php，它将更改为<h5>portfolio</h5> 。如果您知道如何执行此操作，我真的很感激...提前致谢!

Answer 1

您需要首先添加一个 JavaScript 函数来处理该事件。

<script>
function changedSelect(x)
{
    document.getElementById('pageTitleDiv').innerHTML = "<h5>"+x+"</h5>";
}
</script>

然后，您需要在“选择”框更改时触发该事件。

<select onchange="changedSelect(this.value)">

最后，我会给 div 一个“ID”，以便对其进行专门更改。

<div class="pagetitle" id="pageTitleDiv">