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

Question

Let's say I have a webpage like this:

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

As you can see, a user can choose from 4 options in the select menu. I want to know ,is there any way to change the content of this div => <div class="pagetitle"> with javascript onsubmit ? For example if a user choosed blogs.php ,the h5 tag will change to <h5>blogs</h5> & if he choosed portfolio.php ,it'll be changed to <h5>portfolio</h5> . I really appreciate if you know how to do this ... thanks in advance!

Answer 1

You need to bind a jquery .change event to the select element and have it's selected value populated as the text of h5 tag

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

Example : https://jsfiddle.net/DinoMyte/6x80vabm/4/