读书人

jquery绑定上拉列表 实现上拉类表的值

发布时间: 2013-03-21 10:08:17 作者: rapoo

jquery绑定下拉列表 实现下拉类表的值改变,<td id="paid-price"></td>的值也改变
<script type="text/javascript">
$(document).ready(function () {
$('#mySelect').change(function () {
var item = $('#mySelect').val();
var price = $('#price').text();
$('#paid-price').html(item * price);

});
});
</script>

<table>
<tr>
<th>菜名</th>
<th>份数</th>
<th>单价</th>
<th>实收价格</th>
</tr>
@foreach (var item in Model)
{
<tr>

<td>@item.Name</td>
<td>
<select id="mySelect">
<option>0.5</option>
<option>1</option>
<option>1.5</option>
<option>2</option>
</select>
</td>
<td id="price">
@item.Price
</td>
<td id="paid-price">

</td>
</tr>

}
</table>

这是部分代码
实现后 只能第一个下拉列表能绑定上 怎么处理啊 function ?ajax?
[解决办法]
你的id都重复了,id不唯一,你可以用样式来控制

<script type="text/javascript">
$(document).ready(function () {
$('.myselect).change(function () {
var item = $(this).val();
var price = $(this).parent().parent().find('.myprice').text();
$(this).parent().parent().find('.mypaidprice').html(item * price);


});
});
</script>

<table>
<tr>
<th>菜名</th>
<th>份数</th>
<th>单价</th>
<th>实收价格</th>
</tr>
@foreach (var item in Model)
{
<tr>

<td>@item.Name</td>
<td>
<select id="mySelect" class="myselect">
<option>0.5</option>
<option>1</option>
<option>1.5</option>
<option>2</option>
</select>
</td>
<td id="price" class="myprice">
@item.Price
</td>
<td id="paid-price" class="mypaidprice">

</td>
</tr>

}
</table>
[解决办法]
一个parent是td,再加一个parent是tr,只有tr才能找到price和paid-price

读书人网 >asp.net

热点推荐