画像のリストを持つ要素をリンクする

Question

私はギャラリーを持っており、それをselect要素にリンクしたいと思います。だから私は任意の画像をクリックすると、選択したオプションを変更すると、画像の輪郭を描くオプションを選択したとき。私は以下のHTMLを持っていますが、私はjsで非常に新しく、このコードを自分で行うことはできません。 jQueryのあなたのHTML使用

    <select id="tShirtDropdown"> 
         <option value="0" data-img-src='imgs/tShirt64.jpg'>1</option> 
         <option value="1" data-img-src='imgs/tShirt64.jpg'>2</option> 
         <option value="2" data-img-src='imgs/tShirt64.jpg'>3</option> 
         <option value="3" data-img-src='imgs/tShirt64.jpg'>4</option> 
         <option value="4" data-img-src='imgs/tShirt64.jpg'>5</option> 
         <option value="5" data-img-src='imgs/tShirt64.jpg'>6</option> 
         <option value="6" data-img-src='imgs/tShirt64.jpg'>7</option> 
         <option value="7" data-img-src='imgs/tShirt64.jpg'>8</option> 
         <option value="8" data-img-src='imgs/tShirt64.jpg'>9</option> 
        </select> 

        <ul id="menGallery"> 
         <li class="fLeft"><img src="imgs/tShirt64.jpg"><h1>1</h1></li> 
         <li class="fLeft"><img src="imgs/tShirt64.jpg"><h1>2</h1></li> 
         <li class="fLeft"><img src="imgs/tShirt64.jpg"><h1>3</h1></li> 
         <li class="fLeft"><img src="imgs/tShirt64.jpg"><h1>4</h1></li> 
         <li class="fLeft"><img src="imgs/tShirt64.jpg"><h1>5</h1></li> 
         <li class="fLeft"><img src="imgs/tShirt64.jpg"><h1>6</h1></li> 
         <li class="fLeft"><img src="imgs/tShirt64.jpg"><h1>7</h1></li> 
         <li class="fLeft"><img src="imgs/tShirt64.jpg"><h1>8</h1></li> 
         <li class="fLeft"><img src="imgs/tShirt64.jpg"><h1>9</h1></li> 
        </ul> 

Answer 1

例：

$('#tShirtDropdown').change(function() { 
 
    var selected = $(this).val(), 
 
     el = $('#menGallery').children().eq(selected).find('img'); 
 
    
 
    $('#menGallery li img').removeClass('active'); 
 
    el.addClass('active'); 
 
}); 
 

 
$('#menGallery img').click(function() { 
 
    var myIndex = $(this).parent().index(); 
 
    
 
    $('#menGallery li img').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    $('#tShirtDropdown').val(myIndex); 
 
});

ul { 
 
    list-style: none; 
 
} 
 

 
li { 
 
    width: 10%; 
 
    display: inline-block; 
 
    border:1px dotted #ddd; 
 
    text-align: center; 
 
} 
 

 
li img { 
 
    margin-top:5px; 
 
} 
 

 
.active { 
 
    border: 2px solid blue; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<select id="tShirtDropdown"> 
 
    <option data-img-src='http://placehold.it/50x50?text=1' value="0"> 
 
     1 
 
    </option> 
 
    <option data-img-src='http://placehold.it/50x50?text=2' value="1"> 
 
     2 
 
    </option> 
 
    <option data-img-src='http://placehold.it/50x50?text=3' value="2"> 
 
     3 
 
    </option> 
 
    <option data-img-src='http://placehold.it/50x50?text=4' value="3"> 
 
     4 
 
    </option> 
 
    <option data-img-src='http://placehold.it/50x50?text=5' value="4"> 
 
     5 
 
    </option> 
 
    <option data-img-src='http://placehold.it/50x50?text=6' value="5"> 
 
     6 
 
    </option> 
 
    <option data-img-src='http://placehold.it/50x50?text=7' value="6"> 
 
     7 
 
    </option> 
 
    <option data-img-src='http://placehold.it/50x50?text=8' value="7"> 
 
     8 
 
    </option> 
 
    <option data-img-src='http://placehold.it/50x50?text=9' value="8"> 
 
     9 
 
    </option> 
 
</select> 
 
<ul id="menGallery"> 
 
    <li class="fLeft"> 
 
     <img src="http://placehold.it/50x50?text=1"> 
 
     <h1>1</h1> 
 
    </li> 
 
    <li class="fLeft"> 
 
     <img src="http://placehold.it/50x50?text=2"> 
 
     <h1>2</h1> 
 
    </li> 
 
    <li class="fLeft"> 
 
     <img src="http://placehold.it/50x50?text=3"> 
 
     <h1>3</h1> 
 
    </li> 
 
    <li class="fLeft"> 
 
     <img src="http://placehold.it/50x50?text=4"> 
 
     <h1>4</h1> 
 
    </li> 
 
    <li class="fLeft"> 
 
     <img src="http://placehold.it/50x50?text=5"> 
 
     <h1>5</h1> 
 
    </li> 
 
    <li class="fLeft"> 
 
     <img src="http://placehold.it/50x50?text=6"> 
 
     <h1>6</h1> 
 
    </li> 
 
    <li class="fLeft"> 
 
     <img src="http://placehold.it/50x50?text=7"> 
 
     <h1>7</h1> 
 
    </li> 
 
    <li class="fLeft"> 
 
     <img src="http://placehold.it/50x50?text=8"> 
 
     <h1>8</h1> 
 
    </li> 
 
    <li class="fLeft"> 
 
     <img src="http://placehold.it/50x50?text=9"> 
 
     <h1>9</h1> 
 
    </li> 
 
</ul>