Help with jquery dynamic select

Question

Help with jquery dynamic select

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have a problem with some dynamic selection fields, what I want is that when changing one of the select (a) the other select (b) is also changed and vice versa, the problem is that it must be done using the data- attribute cod, for example if I select option 1 of select a, in select b you must select dynamically the option that corresponds to the same code of the data-cod attribute, I leave the code that I carry for the moment, thank you very much for the help.

var wrapper_sel = $(".content_select");

$(wrapper_sel).find('select').change(function(e){

  e.preventDefault(); 	 											

  var cod = $(this).find("option:selected").attr("data-cod");
  alert(cod); 

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content_select">

  <select id="a">

    <option data-cod="1224" value="1">Opción 1</option>
    <option data-cod="1130" value="2">Opción 2</option> 

  </select>

  <select id="b">

    <option data-cod="1224" value="a">Opción a</option>
    <option data-cod="1130" value="b">Opción b</option> 

  </select>

</div>

html ajax select

asked by Andrews 08.12.2017 в 17:14

source

2 answers

How to have a sentence repeated until it is correct Error in JAVA creation of arrayList incompatible types: String can not be converted to branch ----

score 1 · Answer 1

Try searching for the option that contains the one data-cod attribute equal to the selected code, and then mark it as selected .

That's how I was able to achieve it:

var wrapper_sel = $(".content_select");

$(wrapper_sel).find('select').change(function(e){
  e.preventDefault(); 	 											
  var cod = $(this).find("option:selected").attr("data-cod");

  $("#b option[data-cod="+cod+"]")[0].selected = true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content_select">

  <select id="a">

    <option data-cod="1224" value="1">Opción 1</option>
    <option data-cod="1130" value="2">Opción 2</option> 

  </select>

  <select id="b">

    <option data-cod="1224" value="a">Opción a</option>
    <option data-cod="1130" value="b">Opción b</option> 

  </select>

</div>

score 1 · Answer 2

Good friend you can get any property html data with jquery using the function data followed by the key you have after the script.

Example:

html

<option data-cod="1224" value="1">Opción 1</option>

jquery

$(this).find("option:selected").data("cod");

I hope you help greetings

In the example, the idea is to obtain the attribute data and compare it with the same attribute of select next if they match then assign the property selected

var wrapper_sel = $(".content_select");

$(wrapper_sel).find('select').change(function(e){
  e.preventDefault(); 	 											
  var cod = $(this).find("option:selected").data("cod");
  $(".content_select select").find("option").each(function(){
    if($(this).data("cod") == cod){
      $(this).prop("selected","true")
    }
   })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content_select">

  <select id="a">

    <option data-cod="1224" value="1">Opción 1</option>
    <option data-cod="1130" value="2">Opción 2</option> 

  </select>

  <select id="b">

    <option data-cod="1224" value="a">Opción a</option>
    <option data-cod="1130" value="b">Opción b</option> 

  </select>

</div>