Ниже в модальном поле есть выпадающий список во втором последнем столбце HTML-таблицы.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade margt20 frm-1" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-lg">
<form method="POST" enctype="multipart/form-data" autocomplete="off">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="col-xs-12">
<table class="table table-bordered table-responsive" id="dataTable">
<tr>
<th>S.No.</th>
<th>Description</th>
<th>Price</th>
<th>Qty</th>
<th>Amount</th>
<th>Allocate To</th>
<th></th>
</tr>
<tr>
<td>1</td>
<td class="text-center">Bag 1</td>
<td>210.00</td>
<td class="text-center">5</td>
<td class="text-center">1050.00</td>
<td class="text-center">
<select id="ddlmanu" name="ddlmanu[]" class="text-success form-control input-sm">
<option selected disabled value="">-- Select Color --</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Maroon">Maroon</option>
</select>
<input type="text" readonly id="txtmanuid" name="txtmanuid[]" class="form-control input-sm" >
</td>
<td class="pull-left">
<button type="button" id="btnsave" name="btnsave" class="btn btn-primary form-control btn-sm">Save</button>
</td>
</tr>
<tr>
<td>2</td>
<td class="text-center">Bag 2</td>
<td>3600.00</td>
<td class="text-center">10</td>
<td class="text-center">36000.00</td>
<td class="text-center">
<select id="ddlmanu" name="ddlmanu[]" class="text-success form-control input-sm">
<option selected disabled value="">-- Select Color --</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Maroon">Maroon</option>
</select>
<input type="text" readonly id="txtmanuid" name="txtmanuid[]" class="form-control input-sm" >
</td>
<td class="pull-left">
<button type="button" id="btnsave" name="btnsave" class="btn btn-primary form-control btn-sm">Save</button>
</td>
</tr>
<tr>
<td>3</td>
<td class="text-center">Bag 3</td>
<td>3000.00</td>
<td class="text-center">2</td>
<td class="text-center">6000.00</td>
<td class="text-center">
<select id="ddlmanu" name="ddlmanu[]" class="text-success form-control input-sm">
<option selected disabled value="">-- Select Color --</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Maroon">Maroon</option>
</select>
<input type="text" readonly id="txtmanuid" name="txtmanuid[]" class="form-control input-sm" >
</td>
<td class="pull-left">
<button type="button" id="btnsave" name="btnsave" class="btn btn-primary form-control btn-sm">Save</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).on("change","#myModal #ddlmanu",function(){
var value = $(this).val();
$(this).next().val(value);
});
</script>
Я пытаюсь добиться, когда пользователь выбирает текст из dropdown, его значение должно быть показано в textbox ниже. Здесь то, что происходит в первом ряду, отлично работает dropdown, при выборе его значение отображается в текстовом поле. Но когда выбрано второе или третье раскрывающееся меню, в textbox значение не отображается. Зачем? Где я не прав.
Пожалуйста, помогите ??