JQuery从基于选择的下拉列表中的图库中选择图像

Question

我有基于lightSlider的图片库，我试图做到这一点，当我从下拉列表中选择值时，图库将显示与我的id相同的值（带来焦点） ：

画廊：

<ul id="image-gallery" class="gallery"> 
    <li value="id1" data-thumb="images/72x72.jpg"> 
     <img src="images/340x400.jpg" /> </li> 
    <li value="id2" data-thumb="images/72x72.jpg"> 
     <img src="images/340x400.jpg" /> </li> 
    <li value="id3" data-thumb="images/72x72.jpg"> 
     <img src="images/340x400.jpg" /> </li> 
    <li value="id4" data-thumb="images/72x72.jpg"> 
     <img src="images/340x400.jpg" /> </li> 
    <li value="id5" data-thumb="images/72x72.jpg"> 
     <img src="images/340x400.jpg" /> </li> 
</ul> 

和下拉：

<div class="styled-select"> 

<select class="show-labels"> 
    <option id="id1" value="1"> 1</option> 
    <option id="id2" value="2"> 2</option> 
    <option id="id3" value="3"> 3</option> 
    <option id="id4" value="4"> 4</option> 
    <option id="id5" value="5"> 5</option> 
</select> 

我没有想法如何做到这一点。我从选定的选项中选择了id的值，但当我需要选择（并带来焦点）具有相同值的图像时，不知道下一步该做什么，并且在其他情况下，当点击图库中的图像时将下拉值更改为所选项目值。

我尝试：

$(function() { 
$('.styled-select').on('change', function() { 
    var value = $('.show-labels').children(":selected").attr("id"); 
    alert(value); /*just for check if it's working*/ 
}); 

}）;

Answer 1

Iam不确定我是否理解你的权利。 所以看看：jsfiddle.net/pleinx/17urshcc/

现在它改变下拉菜单中选定项目的image-src。 image-src将被“data-thumb”值替换。