用js实现下拉框跳转和下拉框选择图片

awk_bioinfo

于 2021-09-26 14:39:51 发布

阅读量732

点赞数

分类专栏：前端文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_36608036/article/details/120488368

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

用js实现下拉框跳转和下拉框选择图片
Javascript

下拉框跳转

<select name="select" style="width:100px;" οnchange="javascript:window.open(this.options[this.selectedIndex].value)">
<option selected>NCBI</option>
<option value="#">ENSEMBLE</option>
<option value="#">UCSC</option>
</select>

下拉框选择图片（jinjia2 模板渲染代码）
方法一：

<img width=150px height=150px src="src/tab_pics/05.enrich/cluster_0_go_buble.png" name="x1">
<select onChange="document.x1.src=options[selectedIndex].value">
	{%- for i in clusters %}
		<option value="src/tab_pics/05.enrich/cluster_{{ i }}_go_buble.png" width="150" height="150">src/tab_pics/05.enrich/cluster_{{ i }}_go_buble</option>
	{%- endfor %}
</select>

方法二：
<img width=150px height=150px src="src/tab_pics/05.enrich/cluster_0_go_buble.png" name="x1">
<select  id='selection'>
	{%- for i in clusters %}
		<option value="src/tab_pics/05.enrich/cluster_{{ i }}_go_buble.png" width="150" height="150">src/tab_pics/05.enrich/cluster_{{ i }}_go_buble</option>
	{%- endfor %}
</select>
$(".img .x1").change(function (){
	${this}.src = document.getElementById("selection").value;
}