JQuery / Javascript - Как изменить <label>на основе соответствующего <select>

Question

Я хочу изменить метку, если в соответствующем раскрывающемся списке изменилось значение (в той же строке). это страница html.

Каждый выпадающий список и метка имеют разные идентификаторы. Например, если есть 4 выпадающих списка, то их идентификаторы будут dropdown1, dropdown2, dropdown 3, dropdown 4. То же самое с меткой. Но моя проблема в том, что я не знаю, как связать или связать два элемента вместе, например: выпадающий список 1 должен быть подключен к метке 1, то есть при каждом изменении выпадающего списка select1 метка1 будет меняться (при отображении текущей выбранной опции выпадающего списка 1). ).

Вот мой исходный код фрагмента для HTML:

<td> 
    <select class="form-control" id = "bookingTypeDropDown{{$counter1}}"> <!-- Assigning of unique ids based on iteration number -->
           @foreach($booking_types as $booking_type)
                <option value = "{{$booking_type->book_type_price}}">
                     {{$booking_type->book_type_name}}
                </option>
           @endforeach
    </select>
</td>
@foreach($depart_destination_country as $destination)
    <td>
        <input type="radio" 
               name="departure_flight_id" 
               value="{{$flight->flight_id}}" required>
         <label id = "calculatedFare{{$counter1}}">price here</label> <!-- Assigning of unique ids based on iteration number -->

         <input type="hidden" name="total_departure_fare" value="#" required>   
    </td>
@endforeach

На следующем рисунке приведен html для исходного кода сниппета, представленного выше:

Исходный код (отвечает за изменение метки при изменении выбора):

<script type = "application/javascript">

window.onload = function() {

    var numItems = $('.form-control').length; //Counts the number of <select> by class
    var dropdowns =[];
    var labels = [];

    for(var i=0; i<numItems; i++) //Iteration for getting all <select> and <labels> and storing them in their respective arrays
    {
        dropdowns[i] = document.getElementById("bookingTypeDropDown" + i);
        labels[i] = document.getElementById("calculatedFare" + i);
    }

    var currentElement; 

    for(var d=0; d<dropdowns.length; d++)
    {
        var price;

        $(dropdowns[d]).change(function (){ //if dropdown object changed option
            var price = $(this).val(); //getting of option's value
            currentElement = d; //getting of array index where change was detected
            console.log(price);             //printing only
            console.log(currentElement);    //printing of what index does the changed occured
        });

        $(labels[currentElement]).text("PHP " + price); //
    }

}

Проблема в моем javascript коде состоит в том, что он всегда печатает последний индекс или номер итерации (в данном случае это 4), но печатаемые значения верны. например, если я щелкнул первый раскрывающийся список, он печатает правильное значение, но не правильный индекс (печатает индекс 4 вместо индекса 1). Никаких проблем со значением.

Я хочу правильно определить элемент, для которого была изменена опция, и после того, как он был обнаружен, он должен изменить соответствующую метку.

Пример сценария:

Select1 = Label1
Select2 = Label2
Select3 = Label3
....

Как координировать выборку с меткой?

Answer 1

Вы можете просто сделать это, используя селекторы и классы, вам не нужно настраивать и перечислять через вложенные идентификаторы.

Пожалуйста, запустите приведенный ниже фрагмент кода.

$(() => {

  $('.select-price').on('change', function() {
    onChange(this);
  });
  
  function onChange(selectEl) {
    const $row = $(selectEl).parents('tr');
    const $label = $('td:eq(1) label', $row);
    const $departure_flight_input = $('td:eq(1) input[name="departure_flight_id"]', $row);
    
    $label.text($(selectEl).val());
    $departure_flight_input.val($(selectEl).val());
  }
  
  function getInitialPrice() {
    $('.select-price').each((index, el) => onChange(el));
  }
  
  getInitialPrice();

});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<table>
  <tr>
    <td>
      <select class="form-control select-price">
        <option value="1.00">1.00</option>
        <option value="2.00">2.00</option>
        <option value="3.00">3.00</option>
      </select>
    </td>
    <td>
      <input type="radio" name="departure_flight_id" value="" required>
      <label>price here</label> 
    </td>
  <tr>
  <tr>
    <td>
      <select class="form-control select-price">
        <option value="1.10">1.10</option>
        <option value="2.20">2.20</option>
        <option value="3.30">3.30</option>
      </select>
    </td>
    <td>
      <input type="radio" name="departure_flight_id" value="" required>
      <label>price here</label> 
    </td>
  <tr>
</table>