如何根据选择输入使用 javascript 更改页面的内容 - How to change the content of a page with javascript based on select input?

How to change the content of a page with javascript based on select input?

本文关键字：javascript 何根选择输入 | 更新日期: 2023-09-27

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

    <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 个选项中进行选择。我想知道，有没有办法在提交时使用javascript更改此div => <div class="pagetitle">的内容？例如，如果用户选择了博客.php则h5标签将更改为<h5>blogs</h5>，如果他选择了投资组合.php则将其更改为<h5>portfolio</h5>。如果您知道如何做到这一点，我真的很感激...提前感谢！

你需要首先添加一个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">

您需要将 jquery .change 事件绑定到 select 元素，并将其选定值填充为 h5 标签的文本

<script>
    $(document).ready(function(){
    $('select').change(function()
    {
        $('h5').text($(this).val());
    }).change(); // this is optional - it basically invokes the change event as soon as the function is registered.
});
</script>

例： https://jsfiddle.net/DinoMyte/6x80vabm/4/

使用vanilla javascript，我向选择元素

添加了一个id，并使用javascript来获取选择选项的值，然后我更新了DOM上的元素。

<div style="margin:auto;text-align:center;padding-top:10px;">
    <form action="" method="POST">
        <p style="text-align:center;">
        <select id="myselect">
            <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" onclick="myFunction()" value="Submit"/>
        </p>
    </form>
</div>
<div class="pagetitle">
    <h5>Option Value (for example blogs)</h5>
</div>
<script>
function myFunction() {
    var x = document.getElementById("myselect").selectedIndex;
    var _value = document.getElementsByTagName("option")[x].value;
    document.getElementsByTagName('h5')[0].innerText = _value
}
</script>

注意：这可以使用原版JS或库通过多种方式实现，但我认为这回答了您的问题。