Change several Select through only one with jquery

Question

Change several Select through only one with jquery

Navigation

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

2

well as the title says I need to change several select when I select one that I have as the head of the others, I'll put my example in code:

//Este es el select que tiene que cambia a los otros al yo seleccionar alguna de sus opciones
<select name="select_encabezado">
    <option value="1">uno</option>
    <option value="2">dos</option>
    <option value="3">tres</option>
</select>

<br><br>

//Select que deben ser afectados
<select name="otros_select[]">
    <option value="1">uno</option>
    <option value="2">dos</option>
    <option value="3">tres</option>
</select>
<select name="otros_select[]">
    <option value="1">uno</option>
    <option value="2">dos</option>
    <option value="3">tres</option>
</select>
<select name="otros_select[]">
    <option value="1">uno</option>
    <option value="2">dos</option>
    <option value="3">tres</option>
</select>
...
...

So when you change the select header, for example to the option "two", the others must change to the same option.

jquery combobox arreglos

asked by David777 06.01.2017 в 16:24

source

2 answers

2

Using jQuery you can do the following:

$('select[name="select_encabezado"]').on('change', function() {
  $('select[name*=otros_select]').val(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="select_encabezado">
    <option value="1">uno</option>
    <option value="2">dos</option>
    <option value="3">tres</option>
</select>

<br><br>

<select name="otros_select[]">
    <option value="1">uno</option>
    <option value="2">dos</option>
    <option value="3">tres</option>
</select>
<select name="otros_select[]">
    <option value="1">uno</option>
    <option value="2">dos</option>
    <option value="3">tres</option>
</select>
<select name="otros_select[]">
    <option value="1">uno</option>
    <option value="2">dos</option>
    <option value="3">tres</option>
</select>

Update: Thanks to @PaulVargas for your comment

Explanation:

We do not subscribe to the event change of the first select (eg: select_encabezado )
Then, each time that event is detected, we look for the other select using the attribute selector of CSS .
And for each of these we set the value equal to the first.

answered by 06.01.2017 в 16:51

Center TextView How to get number of vowels in JavaScript [closed]

score 4 · Accepted Answer

Like this:

$('.select_encabezado').on('change', function() {
  $('.otros_select').val(this.value);
  // forma más larga
  //$('.otros_select').val(this.value).prop('selected', true);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//Este es el select que tiene que cambia a los otros al yo seleccionar alguna de sus opciones
<br>
<select name="select_encabezado" class="select_encabezado">
  <option value="1">uno</option>
  <option value="2">dos</option>
  <option value="3">tres</option>
</select>

<br>
<br> //Select que deben ser afectados
<br>
<select name="otros_select[]" class="otros_select">
  <option value="1">uno</option>
  <option value="2">dos</option>
  <option value="3">tres</option>
</select>
<select name="otros_select[]" class="otros_select">
  <option value="1">uno</option>
  <option value="2">dos</option>
  <option value="3">tres</option>
</select>
<select name="otros_select[]" class="otros_select">
  <option value="1">uno</option>
  <option value="2">dos</option>
  <option value="3">tres</option>
</select>

The trick is in the class otros_select , every time the main select changes, we change the other select in the event on .