javascript - 根据 HTML 表单中的用户输入刷新图像

Question

我有一系列通过 JSON 文件加载的可视化效果。我创建了一个 HTML 表单，允许用户选择他们想要查看的图像:

<form action="#">
    <fieldset>
        <label for="selector"><b>Select a visualization</b></label>
        <select name="selector" id="selector">
            <option value="one">One</option>
            <option value="two">Two</option>
            <option value="three">Three</option>
        </select>
    </fieldset>
</form>

可视化加载了 JavaScript，如下所示:

var s = document.getElementsByName('selector')[0];
var text = s.options[s.selectedIndex].value;          
var imageURL = "viz/" + text + ".json";
var spec = imageURL;

我已经设置了网站，以便在手动刷新页面时可视化效果会发生变化，但是如何根据用户更改表单中的选择来自动刷新可视化效果？

Answer 1

将可视化加载逻辑放入#selector的onchange事件中:

<select name="selector" id="selector" onchange="changeVisualization()">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>


function changeVisualization(){

var s = document.getElementsByName('selector')[0];
var text = s.options[s.selectedIndex].value;          
var imageURL = "viz/" + text + ".json";
var spec = imageURL;


}