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

Question

I have a number of list items like sports, music, dance etc. I also have images related to them. What I want to do is, when I click on the image of sports, the list item 'sports' seen selected. I am a beginner in java script and do not understand how to make this possible.

Answer 1

This should be a working approach for your, very information missing, question. I wrote this to show you how it CAN work so you can adapt my solution to your code.

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>

Here you can see the jsfiddle: https://jsfiddle.net/1Lw2gupj/2/

Answer 2

With Javascript you can do it like this, you can find jsbin here

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>