Question

我有一个带有一些文本的起始页，当我在起始页中单击显示图像按钮时，它将重定向到另一个页面并显示图像。

<form>
<select name="images" id="images">
        
        <option value="cars">Car Images</option>
        <option value="cycles">Cycle Images</option>
        <option value="bike">Bike Images</option>
</select>
<input id="getimages" type="submit" name="submit" value="Get Images">
</form>

当我选择任何选项并单击“获取图像”按钮时，它才会相应地显示图像。但是我想在页面加载时显示自动选择的选项（首先）而不单击“获取图像”按钮的图像。我尝试使用

document.getElementById("getimages").click()

但是页面一次又一次地重新加载。我怎样才能用 JS/JQuery 解决这个问题。我希望你理解上述问题。如果没有，请告诉我。谢谢。

Answer 1

如果您在没有任何条件的情况下加载页面时自动点击 submit 按钮，则会造成无限循环。

您可以使用 select onchange 事件。

<select name="images" id="images" onchange="document.getElementById("getimages").click()">

但这不是最佳解决方案。我建议您使用 ajax 请求加载图片，无需任何页面刷新。

Answer 2

我不知道我是否理解你，但如果是，那么这可能对你有帮助：我没有您的 JS 代码，但我可以猜测您在单击输入时运行了一个事件，因此您可以添加在文档加载时运行的相同事件。我的意思是这样的

const showImages = () => {
   // the code that shows the images
}

document.querySelector("#getimages").addEventListener("click", showImages())
document.addEventListener("load", showImages())

页面加载后自动点击按钮

2 个答案: