Question

目前，我在foreach循环内有多个文本框和多个下拉列表，同一个id.i已尝试将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

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

使用.class代替#id。
为每个元素命名。
两者都有......

这个例子不在我的脑海中，旨在为您指出一个可能的解决方案。它可能开箱即用，也可能不开箱即用。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: