JQuery/Javascript-如何更改<；标签>；基于其对应的<；选择>；

如果标签对应的下拉列表更改了值（在同一行中），我想更改标签。这是html页面

每个下拉列表和标签都有不同的ID。例如，如果有4个下拉列表，那么它们的ID将是dropdown1、dropdown2、dropdown3、dropdown4。标签也一样。但我的问题是，我不知道如何将这两个元素对应或链接在一起，例如：下拉列表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

@foreach（$booking\u type作为$booking\u type）
{{$booking\u type->book\u type\u name}
@endforeach
@foreach（$destination\u destination\u country as$destination）
这里的价格
@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); //
    }

}

源代码（负责更改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); //
    }

}

window.onload=函数（）{
var numItems=$（'.form control'）.length；//按类计算
var下拉列表=[]；
var标签=[]；
对于（var i=0；i，您只需使用选择器和类即可完成，而无需通过嵌套ID进行设置和枚举

请运行下面的代码段


$（（）=>{
$（'.select price'）。在（'change'，function（）上{
一旦改变（这个）；
});
功能更改（选择EL）{
const$row=$（selectEl）.parents（'tr'）；
const$label=$（'td:eq（1）label'，$row）；
const$出发\航班\输入=$（'td:eq（1）输入[name=“出发\航班\ id”]，$row）；
$label.text（$（selectEl.val（））；
$execution\u flight\u input.val（$（selectEl.val（））；
}
函数getInitialPrice（）{
$（'.select price'）。每个（（指数，el）=>onChange（el））；
}
getInitialPrice（）；
})；

1
2
3
这里的价格
1.10
2.20
3.30
这里的价格
“如何将两个元素对应或链接在一起”-给它们相同的数据-（例如“pair”）属性+值，然后在
中选择
更改，它是：
$（“[data pair=””+$（this.data（“pair”）+“]）。文本（$（this.val（））
它正在工作，但当我将标签对象应用到我的web应用程序中时，它似乎找不到标签对象。通过将索引从1更改为7，已经修复了它，因为标签位于每个表行的第7个表单元格中。从td:eq（1）到td:eq（7）…谢谢！