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

Question

目前，我在foreach循环中有多个具有相同id的文本框和多个下拉列表。我试图在更改为相关textbox获取dropdown选定textbox 。 当前，它仅适用于第一个文本框和第一个下拉列表。 可能是什么原因？

这是我的代码

<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>

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())
    });
});

Answer 1

您可以通过三种方式解决此问题：

1. 使用.class而不是#id 。
2. 唯一命名每个元素。
3. 两者都...

这个例子让我难以置信，旨在为您提供一个可能的解决方案。 它可能是开箱即用的，也可能是开箱即用的。

 <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"> <!-- Notice the unique id of these inputs --> <input type="text" id="newmeal-{{$key}}" name="newmeal[]" value="{{ $element->food }}"> <input type="hidden" id="mealtime-{{$key}}" name="mealtime[]" value="{{ $element->id }}"> <div class="col-md-12 margin-top-5 dropdown" style="padding-left: 0px; padding-right: 0px;"> <!-- notice the unique id, and the data attribute --> <select id="dropdown-{{$key}}" data-key="{{$key}}" 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> 

 $(document).ready(function () { // this observer will need to be changed. Left as exercise for the reader. $("#dropdown option").filter(function () { return $(this).val() == $("#newmeal").val(); }).attr('selected', true); // using a class to observe. Needs to be something that isn't used elsewhere, though. $(".foodrecipe_item").on("change", function () { var key = $(this).data('key'); $("#newmeal-"+key).val($(this).find("option:selected").text()) }); });