Связанные select jQuery

251

08 февраля 2020, 01:50

У меня есть три условных двумерных массивa:

arrayMerged1 = {
        {value: "1", text: "10"} 
        {value: "2", text: "14"} 
        {value: "3", text: "27"} 
    }
arrayMerged2 = {
        {value: "21", text: "08-12Х18Н10Т"} 
        {value: "52", text: "40Х"} 
        {value: "36", text: "09Г2С"} 
    }
arrayMerged3 = {
        {value: "5", text: "1.5"} 
        {value: "10", text: "2.5"} 
        {value: "7", text: "4"} 
    }

Так же есть три, несвязанных между собой select, value и text у них тот же самый. У первого select данные из arrayMerged1 и так далее.

Данные массивов были взяты из таблицы ниже:

Так как эта таблица сделана через представление в Drupal 7, то у каждого tr и td есть свои классы, из-за чего к ним можно легко обратиться в скрипте.

Мне предстоит сделать эти select связанными между собой, но я не могу понять, как мне построить логику в скрипте. Другими словами, каким образом при выборе значения в первом select, скрипт будет понимать, какие значения нужно оставить во втором? Так же у меня нет возможности использовать jQuery плагин Chained Selects

Answer 1

Вот один из способов "синхронизировать" значения в select.

$('.sync').on('change', syncSelects); 
 
function syncSelects() { 
  var that = this; 
  $('.sync').each(function() { 
    if (this !== that) { 
      this.selectedIndex = that.selectedIndex; 
    } 
  }); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<select class='sync'> 
  <option value="1">1</option> 
  <option value="2">2</option> 
  <option value="3">3</option> 
</select> 
<select class='sync'> 
  <option value="21">21</option> 
  <option value="22">22</option> 
  <option value="23">23</option> 
</select> 
<select class='sync'> 
  <option value="31">31</option> 
  <option value="32">32</option> 
  <option value="33">33</option> 
</select>