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」值替換。