Javascript 如何在foreach循环内的文本框中获取下拉选择的选项文本

目前，我在

foreach

循环中有多个文本框和多个下拉列表，具有相同的id。我已尝试在更改到相关

文本框时获取
下拉列表。目前，它仅适用于第一个文本框和第一个下拉列表。原因可能是什么


这是我的密码

<div class="child-name-col">
    <div id="header-type" class="foodmenu-dispay-view-header headerbody clearfix">
    @foreach ($showenMenus as $key => $element)
        <div class="daily-col daily-col-200 reset-padding margin-right-20 parent-div">
        <input type="text" id="newmeal"  name="newmeal[]" value="{{ $element->food }}">
        <input type="hidden" id="mealtime"  name="mealtime[]" value="{{ $element->id }}">
        <div class="col-md-12 margin-top-5 dropdown" style="padding-left: 0px; padding-right: 0px;">
             <select id="dropdown"  name="dropdown[]"  class="form-control foodrecipe_item dropdown_item" >
                 <option value="">None</option>
                  @foreach ($meal_list as  $element)
                     <option value="{{ $element->id }}">{{ $element->title }}</option>
                  @endforeach
              </select>

           </div>
        </div>
    @endforeach

 </div>

解决此问题的三种方法：

使用
.class
而不是
#id

唯一地命名每个元素
两者都有一点
这个例子不在我的脑海中，旨在为您指出一个可能的解决方案。它可能是现成的，也可能不是现成的



@foreach（$key=>$element显示菜单）
没有一个
@foreach（$MEIN_列表为$element）
{{$element->title}
@endforeach
@endforeach
请修复缩进。试着给每个输入元素一个唯一的
id
“……foreach循环中有多个文本框和多个下拉列表，id相同。”每个
id
必须是唯一的。@TimMorton它在foreach循环中打印，所以id也完全相同。HTML不允许多个元素具有相同的
id
属性。您的javascript如何知道它应该在哪一个上工作。相反，您需要使用类，或者用唯一的名称专门命名每个元素。
$(document).ready(function () {
    $("#dropdown option").filter(function () {
         return $(this).val() == $("#newmeal").val();
    }).attr('selected', true);


    $("#dropdown").on("change", function () {
         $("#newmeal").val($(this).find("option:selected").text())
    });
});