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;


}

Answer 2

您可以在javascript上使用onchange。它会自动显示而无需刷新页面

<input type='file' name='file' accept="image/*" onchange="loadFile(event)" value = "logo1.png" />
<center>
    <img  src="logo1.png" id="output"  width="310" align = "center"> 
</center>
</div>

Javascript：

<script>
   var loadFile = function(event) {
       var reader = new FileReader();
       reader.onload = function(){
           var output = document.getElementById('output');
           output.src = reader.result;
       };
       reader.readAsDataURL(event.target.files[0]);
   };
</script>

根据用户输入的HTML格式刷新图像

2 个答案: