Question

如何根据从下拉菜单中选择的值连续刷新页面（自动刷新）？从谷歌搜索，这是我到目前为止。请参考下面的代码。

<form> 
Update interval (in seconds): 
<select name="interval" id="interval"> 
<option value="5">10</option> 
<option value="10">10</option> 
<option value="15">15</option> 
<option value="20">20</option> 
</select> 
</form> 

<script type="text/JavaScript">
window.setTimeout('window.location="";', document.getElementById('interval').value*1000);
</script>

我现在面临的问题是，无论选择了什么值，页面仅在5秒间隔内刷新（下拉列表中的第一个选择）。我是html和javascript的新手，希望有人可以帮忙解决这个问题。

Answer 1

您需要在更改选择下拉列表时执行此操作，否则它将仅基于页面加载时的选定值（示例代码中为5）

<form> 
  Update interval (in seconds): 
  <select name="interval" id="interval" onchange="window.setTimeout(function(){ document.location.reload(true); }, this.options[this.selectedIndex].value*1000);">
    <option value="" disabled selected>Make a Selection</option>
    <option value="5">5</option> 
    <option value="10">10</option> 
    <option value="15">15</option> 
    <option value="20">20</option> 
  </select> 
</form>

Answer 2

JS：

function updateInterval(e) {
  var options = e.options
  var seconds = options[options.selectedIndex].value

  if (this.currentInterval)
    clearInterval(this.currentInterval)

  if (!isNaN(seconds))
    this.currentInterval = setInterval(
      function() { location.reload() },
      seconds * 1000
    )
}

HTML：

<form>
  Update interval (in seconds):
  <select onChange="updateInterval(this)">
    <option>Select</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
  </select>
</form>

基于下拉选择值自动刷新（javascript / html）

2 个答案: