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 =＆gt;的内容使用javascript onsubmit <div class="pagetitle">？例如，如果用户选择 blogs.php ，则 h5 标记将更改为<h5>blogs</h5>＆amp;如果他选择 portfolio.php ，它将被更改为<h5>portfolio</h5>。如果你知道怎么做，我真的很感激...提前谢谢！

Answer 1

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

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

然后当＆＃34;选择＆＃34;然后你需要触发事件。框已更改。

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

最后，我会给div一个＆＃34; ID＆＃34;所以它被特别改变了。

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

Answer 2

您需要将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/

Answer 3

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

import sys

if sys.version_info[0] < 3:
    import Tkinter as tk     ## Python 2.x
else:
    import tkinter as tk     ## Python 3.x


class IncrementVar():
    def __init__(self, root):
        self.count=0
        self.label=tk.Label(root, text=self.count)
        self.label.pack(side="top")

        tk.Button(root, text="Next", command=self.nxt).pack()
        tk.Button(root, text="Previous", command=self.bck).pack()


    def nxt(self):
        self.count += 1
        print("     Forward", self.count)
        self.label.config(text=self.count)

    def bck(self):
        self.count -= 1
        print("     Back", self.count)
        self.label.config(text=self.count)

root=tk.Tk()
root.geometry("100x100-0+0")
IV=IncrementVar(root)
root.mainloop()

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

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

3 个答案: