Multiple selects change on div click

Question

I'm trying to have multiple selects changed on div click, the problem is that only the last clicked keeps selected, i'll be grateful if someone knows how to solve this.

Edit: Selects are dynamic, so i can't know how many there will be, therefore i can't give a class or id to them, the only data i have is the options values.

 $("div").on("click", function() { $("select").val($(this).data("value")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-value="1">1</div> <div data-value="2">2</div> <div data-value="3">3</div> <div data-value="a">a</div> <div data-value="b">b</div> <div data-value="c">c</div> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> </select> 

Answer 1

You should specify which select you wish to fill, otherwise it will attempt to update both the select with the value you have clicked. Once the values in the select are different, one of them will always stay blank after a user click.

I would suggest the strategy below, setting a class to each select , and using a data- property related to the class.

 $("div").on("click", function() { var targetClass = $(this).data("target"); $("select" + targetClass).val($(this).data("value")); }); 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <div data-value="1" data-target=".first">1</div> <div data-value="1" data-target=".first">1</div> <div data-value="2" data-target=".first">2</div> <div data-value="3" data-target=".first">3</div> <div data-value="a" data-target=".second">a</div> <div data-value="b" data-target=".second">b</div> <div data-value="c" data-target=".second">c</div> <select class="first"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select class="second"> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> </select> 

Answer 2

Your data-value values aren't valid for both selects. If you try to set a value that doesn't exist in one of the options for that select, it doesn't show any value.

You can make it only change the value of selects that contain an option with that value by using the :has() selector modifier.

 $("div").on("click", function() { let newval = $(this).data("value"); $(`select:has([value='${newval}'])`).val(newval); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-value="1">1</div> <div data-value="2">2</div> <div data-value="3">3</div> <div data-value="a">a</div> <div data-value="b">b</div> <div data-value="c">c</div> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> </select> 

Answer 3

If you link each of the divs to one of the selects by giving each div an attribute s of numbers or letters which refers to the first or second select, then it will only change that select when a div is clicked.

 $("div").on("click", function() { var sel = this.getAttribute('s') $("#"+sel).val($(this).data("value")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-value="1" s='numbers'>1</div> <div data-value="2" s='numbers'>2</div> <div data-value="3" s='numbers'>3</div> <div data-value="a" s='letters'>a</div> <div data-value="b" s='letters'>b</div> <div data-value="c" s='letters'>c</div> <select id='numbers'> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select id='letters'> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> </select>