CODEWITHSUNDEEP
javascriptjqueryhtmlcss
master2080
master2080

Reputation: 371

Find out which element was clicked from the list of elements

I have a few divs that share the same class. I have a dropdown that changes the background color of one of those divs when selected(option 2 changes div #2).
My question is how can I change the dropdown option when clicking a certain div?
I have the logic behind changing the actual option and the div clicks, but I can't figure out how to find exactly which of the divs was clicked(the divs are dynamically created, so they don't have Ids, only class names).
Is there any way to check what div was clicked relatively to the entire list of divs with the same class? Thanks.
Example code:

<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:
What I have:
The select can change the color of a div depending on choice.
Clicking a div changes it's own color.
What I need:
Clicking a div also changes the option in the select. I hope it's a bit clearer now

Upvotes: 2

Views: 1290

Answers (4)

Kld
Kld

Reputation: 7068

With jQuery You can get the index of the clicked div by using .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>

Upvotes: 6

Vaibhav Sah
Vaibhav Sah

Reputation: 142

You can follow this 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>

Thanks. Please tell if it works fine.

Upvotes: 0

Ilanus
Ilanus

Reputation: 6928

You can use jQuery for this, It's very simple:

<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);
});

Example: http://codepen.io/ilanus/pen/zBgvJr

Upvotes: 1

Aman Rawat
Aman Rawat

Reputation: 2625

Wrap the div around a parent div and use index() to get the position of 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>

Upvotes: 0

Related Questions