在模式框下方，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中没有显示任何值。为什么？我哪里错了。
请帮助??
答案 0 :(得分：0)
在每个选择框selectBox
这是jQuery代码
$(document).on("change",".selectBox",function() {
var value = $(this).val();
$(this).next().val(value);
});
答案 1 :(得分：0)
找到，这是可行的。
$('select').change(function(){
$(this).next().val($(this).val());
});<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="ddlmanu1" 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" class="form-control input-sm" >
</td>
<td class="pull-left">
<button type="button" id="btnalloctomanu" name="btnalloctomanu" 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="ddlmanu2" 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" class="form-control input-sm" >
</td>
<td class="pull-left">
<button type="button" id="btnalloctomanu" name="btnalloctomanu" 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="ddlmanu3" 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" class="form-control input-sm" >
</td>
<td class="pull-left">
<button type="button" id="btnalloctomanu" name="btnalloctomanu" class="btn btn-primary form-control btn-sm">Save</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</form>
</div>
</div>