使用href从下拉菜单中自动选择一个选项

Question

我试图有一个下拉菜单自动选择基于从上一页按下的按钮获得的href选项，这是存储在地址栏中。我试着查找这个问题，但我似乎找不到任何关于它的东西，所以我只能假设我的措辞是错误的，或者这是不可能的。

这是我的代码从index.html

<div class="logo-row">
<img src="./assets/img.png" onclick="function();" class="logo"/>
<a href="./page1.html#sprites"><img src="./assets/sprites_placeholder.png" class="button p1"/></a>
<a href="./page1.html#models"><img src="./assets/models_placeholder.png" class="button p1"/></a>
<a href="./page1.html#textures"><img src="./assets/textures_placeholder.png" class="button p1"/></a>
<a href="./page1.html#sounds"><img src="./assets/sounds_placeholder.png" class="button p1"/></a>
</div>

这是page1。html

的代码

<div class="custom-select">
<label class="resource">Resource:</label>
<select id="selectBox" onchange="changeResource();">
<option value="1" id="sprites">Sprites</option>
<option value="2" id="models">Models</option>
<option value="3" id="textures">Textures</option>
<option value="4" id="sounds">Sounds</option>
</select>
</div>

我不完全确定这描绘了我想要达到的效果，但是当我用纯文本测试它时，它加载得很好。

Answer 1

你可以从url中获取哈希id，然后使用javascript从下拉菜单中设置所选元素

<script>
var hash = location.hash.substr(1);
document.querySelector('option[id="'+hash+'"]').setAttribute('selected', true);
</script>