Узнайте, какой элемент был нажат из списка элементов.

Question

У меня есть несколько div, которые имеют один и тот же класс. У меня есть раскрывающийся список, который меняет цвет фона одного из этих divs при выборе (опция 2 изменяет div # 2).
Мой вопрос в том, как я могу изменить раскрывающийся список при нажатии на определенный div?
У меня есть логика изменения фактической опции и щелчков div, но я не могу понять, как точно определить, какой из этих divs был нажат (динамики создаются динамически, поэтому у них нет идентификаторов, только класс имена).
Есть ли способ проверить, какой div был нажат относительно всего списка divs с тем же классом? Спасибо.
Пример кода:

<select class="size form-control" id="size" name="size"> 
<option value="1">first div</option> 
<option value="2">second div</option> 
<option value="4">third div..</option> 
</select> 

<div class="collection">random</div> 
<div class="collection">text</div> 
<div class="collection">inside</div> 
<div class="collection">here</div> 

Edit:
Что у меня есть:
Выбрать, можно изменить цвет DIV в зависимости от выбора.
Нажатие на div изменяет собственный цвет.
Что мне нужно:
Щелчок по div также изменяет параметр в списке. Я надеюсь, что это немного яснее

Answer 1

С JQuery вы можете получить индекс щелкнули DIV с помощью .index()

$('div.collection').click(function() { 
 
    var index = $('div.collection').index($(this)); 
 
    console.log(index); 
 

 
    $('select').val(index + 1); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="collection">Div1</div> 
 
<div class="collection">Div2</div> 
 
<div class="collection">Div3</div> 
 
<div class="collection">Div4</div> 
 

 
<select class="size form-control" id="size" name="size"> 
 
    <option value="1">first div</option> 
 
    <option value="2">second div</option> 
 
    <option value="4">third div..</option> 
 
</select>

Answer 2

Вы можете использовать JQuery для этого, очень просто:

<select class="size form-control" id="size" name="size"> 
    <option value="1">first div</option> 
    <option value="2">second div</option> 
    <option value="4">third div..</option> 
</select> 

<div class="collection">Div1</div> 
<div class="collection">Div2</div> 
<div class="collection">Div3</div> 
<div class="collection">Div4</div> 

JQuery:

$('div.collection').click(function(){ 
var index = $('div.collection').index($(this)) + 1; 
    $('select').val(index); 
}); 

Пример: http://codepen.io/ilanus/pen/zBgvJr

Answer 3

Оберните DIV вокруг родительского DIV и использовать index(), чтобы получить позицию DIV

$('.collection').click(function(){ 
 
    var position = $(this).index()+1; 
 
    console.log(position); 
 
    $('.size').val(position); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="size form-control" id="size" name="size"> 
 
<option value="1">first div</option> 
 
<option value="2">second div</option> 
 
<option value="3">third div..</option> 
 
    <option value="4">Fourth div..</option> 
 
</select> 
 
<div> 
 
    <div class="collection">random</div> 
 
    <div class="collection">text</div> 
 
    <div class="collection">inside</div> 
 
    <div class="collection">here</div> 
 
</div>

Answer 4

Вы можете следить за этим Pen.

<div id='parentDiv'> 
    <div class="clickMe">1</div> 
    <div class="clickMe">2</div> 
    <div class="clickMe">3</div> 
    <div class="clickMe">4</div> 
</div> 
<select name="dropDown"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 

<style> 
.clickMe{ 
    clear:both; 
    width:20px; 
    height:20px; 
    border:1px solid black; 
    margin: 20px; 
} 
</style> 

<script> 
$('#parentDiv').on('click','.clickMe',function(){ 
    console.log($(this).index()); 
     var index= $(this).index(); 
     $('select[name=dropDown] option:eq('+index+')').attr('selected', 'selected'); 
}); 
</script> 

Спасибо. Скажите, работает ли он нормально.