[英]how to get dropdown selected option text on the textbox inside foreach loop
目前,我在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())
});
});
您可以通過三種方式解決此問題:
.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()) }); });
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.