如何显示在javascript中选中的列表项

How to show list items got selected in javascript

本文关键字：列表 javascript 何显示 显示      更新时间：2023-09-26

我有许多列表项目，如体育、音乐、舞蹈等。我也有与它们相关的图像。我想做的是，当我点击体育图片时，列表项"体育"被选中。我是java脚本的初学者，不知道如何实现这一点。

这应该是一种有效的方法来解决您的信息缺失问题。我写这篇文章是为了向你展示它是如何工作的，这样你就可以根据你的代码调整我的解决方案。

JS:

$('img').click(function() {
    match = $(this).attr("match");
    $('select').val(match);
}

HTML:

<img src="1.jpg" match="sport"/>
<img src="2.jpg" match="dance"/>
<select name="list" value="">
    <option value="sport">Sport</option>
    <option value="dance">Dance</option>
</select>

在这里你可以看到jsfiddle：https://jsfiddle.net/1Lw2gupj/2/

使用Javascript，你可以这样做，你可以在这里找到jsbin

JS-

(function(){
var hobby=document.getElementById('hobby');
var list=document.getElementById('imageCollection');
list.addEventListener('click',function(event){
        hobby.value=event.target.name;
    },true);
})();

HTML

<select name="hobby" id="hobby">
    <option value="sports">Sports</option>
    <option value="dance">Dance</option>
    <option value="music">Music</option>
</select>
<ul id="imageCollection">
    <li><img src="sports.jpg" alt="Sports" name="sports" />
    </li>
    <li><img src="dance.jpg" name="dance" alt="Dance" />
    </li>
    <li><img src="music.jpg" name="music" alt="Music" />
    </li>
</ul>
相关文章：