JQuery/Javascript - 如何<label>根據其對應的</label>變化<select>

Question

如果相應的下拉列表更改了值（在同一行中），我想更改標簽。 這是 html 頁面。

每個下拉菜單和標簽都有不同的 ID。 例如，如果有 4 個下拉列表，那么它們的 id 將是 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：

源代碼（負責更改select時標簽的更改）：

<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）。 價值沒有問題。

我想要的是正確檢測已更改選項的元素，一旦檢測到它就應該更改其相應的標簽。

場景示例：

選擇 1 = 標簽 1
選擇 2 = 標簽 2
選擇 3 = 標簽 3
....

我如何將選擇協調到標簽？

Answer 1

您可以簡單地通過使用選擇器和類來完成，您不必通過嵌套 ID 進行設置和枚舉。

請運行以下代碼片段。

 $(() => { $('.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>