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

debugcn 发表于 Dev

节日

目前我在foreach循环内有多个文本框和多个下拉列表，具有相同的 id。我试图将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())
    });
});

蒂姆·莫顿

解决此问题的三种方法：

使用 a.class而不是#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">

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。