Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/85.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在两个不同的相同网页上显示所选选项?_Javascript_Html - Fatal编程技术网

Javascript 如何在两个不同的相同网页上显示所选选项?

Javascript 如何在两个不同的相同网页上显示所选选项?,javascript,html,Javascript,Html,我对网页和HTML非常陌生,我不确定解决这个程序最简单的方法是什么。我有一个基本的网页,我从标签上获取数据,然后我有一个按钮将其推到网页上的一个部分 HTML <div id="footer"> <p id="selectedEvent">Event</p> </div> <select id="currentEvent"> <option value=&q

我对网页和HTML非常陌生,我不确定解决这个程序最简单的方法是什么。我有一个基本的网页,我从标签上获取数据,然后我有一个按钮将其推到网页上的一个部分

HTML

<div id="footer">
   <p id="selectedEvent">Event</p>
</div>

<select id="currentEvent">
   <option value="" disabled selected>Current Event</option>
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   <option value="3">Option 3</option>
</select>
<button type="button" onclick="GetSelectedText()">Push Changes</button>
我想要做的是在另一个选项卡中运行的代码的另一个实例上更新文本,这样两个网页在推送到其中一个页面上后都会显示所选选项。最简单的方法是什么

编辑 我将简要地解释我的用例,以获得更多有用的响应。我使用它作为OBS的覆盖和接口作为浏览器源,因此解决方案基本上需要能够在不同的浏览器(如Chrome和Firefox)之间进行同步

提前谢谢

这就是你想要的吗

var e = document.getElementById("currentEvent");

function GetSelectedText() {
    var selected = e.options[e.selectedIndex];
    document.getElementById("selectedEvent").innerHTML = selected.text;

    if (typeof(Storage) !== "undefined") { 
        localStorage.setItem("s_option", selected.text);
        localStorage.setItem("s_option_value", selected.value);
    }
}

function show_result() {
    document.getElementById("selectedEvent").innerHTML = localStorage.getItem("s_option");
    document.getElementById("currentEvent").value = localStorage.getItem("s_option_value");
}

window.addEventListener("storage", show_result);
e.addEventListener("change", GetSelectedText);

你是说“浏览器”选项卡吗?是的,我正在通过localhost对同一网页运行两个不同的浏览器选项卡。@我已经添加了一个答案。请复习一下。如果有用的话,请告诉我,这样我可以给它添加解释。谢谢,这很有用,但对我所需要的不太有用。我应该在OP中解释我的用例。我使用它作为OBS中浏览器源覆盖的接口。我相信这个解决方案在我的情况下不起作用,因为OBS运行自己的内部浏览器,以显示网页和chrome中的本地存储无法转移到它用来呈现源的内部OBS浏览器。这个用例最简单的解决方案是什么?谢谢你的帮助。@你试过了吗。好吧,如果它不适合您,我很抱歉,因为我不熟悉OBS中的浏览器源代码覆盖。
var e = document.getElementById("currentEvent");

function GetSelectedText() {
    var selected = e.options[e.selectedIndex];
    document.getElementById("selectedEvent").innerHTML = selected.text;

    if (typeof(Storage) !== "undefined") { 
        localStorage.setItem("s_option", selected.text);
        localStorage.setItem("s_option_value", selected.value);
    }
}

function show_result() {
    document.getElementById("selectedEvent").innerHTML = localStorage.getItem("s_option");
    document.getElementById("currentEvent").value = localStorage.getItem("s_option_value");
}

window.addEventListener("storage", show_result);
e.addEventListener("change", GetSelectedText);