Question

我使用的是Laravel 4.2。我在foreach语句中有表格：

@foreach($result as $key => $prices)
$endforeach

在这个foreach循环中，我有一个表单：

<div class="col-md-3 slide_content">
    <div class="form-group">
        <label for="">How many car?</label>
        <select class="form-control" name="number_of_car" id="car_no">
            <option value="" selected>select car numbers</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
    </div>
</div>

<div class="col-md-3 slide_content">
    <div class="form-group">
        <label for="">Method to pay?</label>
        <select class="form-control" name="payment_method" id="ad_tt">
            <option value="">Select Type</option>
            <option value="1">Full Payment</option>
            <option value="2">Advance Payment</option>
        </select>
    </div>
</div>

这是我的Javascript代码：

$(document).ready(function(){
    $("#car_no").change(function(){
        var number_of_car = $("#car_no option:selected").val();
        var payment_type = $("#ad_tt option:selected").val();
        var amount = "<?php $ad = $prices->totalAmount; echo 'Rs: '.$ad; ?>"; alert(amount);
    });
});

我的问题是，当我更改第一个循环以外的行的选项值时，我只得到第一行的值。但是，我需要从相应的行中获取。那么，我怎么能用jquery做到这一点。

任何帮助将不胜感激。谢谢。

Answer 1

你必须使用class而不是id，因为id在DOM中必须是唯一的。在这里，您将触发id = car_no的change事件，您必须通过将iterator值附加到id来使其成为唯一。

$("#car_no").change(function() {} //should replace with 
$(".car_no").change(function(){
// use $(this).attr('data') to identify the element.
}

Answer 2

HTML中的ID必须是唯一的。这是预期的行为。可以使用公共类并使用关系来使用各种方法遍历DOM。

下面我使用car_no和ad_tt作为select元素的CSS类

HTML 的

<div class="col-md-3 slide_content">
    <div class="form-group">
        <label for="">How many car?</label>
        <select class="form-control car_no" name="number_of_car" data-amount="<?php $ad = $prices->totalAmount; echo 'Rs: '.$ad; ?>">
        </select>
    </div>
</div>

<div class="col-md-3 slide_content">
    <div class="form-group">
        <label for="">Method to pay?</label>
        <select class="form-control ad_tt" name="payment_method">
        </select>
    </div>
</div>

SCRIPT

$(document).ready(function(){
    $(".car_no").change(function(){
        var number_of_car = $(this).val();
        var payment_type = $(this).closest('.slide_content').next('.slide_content').find(".ad_tt" ).val();

        var amount = $(this).data("amount");
        alert(amount);
    });
});

Answer 3

您不能将id用于多个元素。你必须使用课程。

<select class="form-control" name="number_of_car" class="car_no" >

和

var number_of_car = $(this).val();

同样获取其他下拉列表的值。

Onchange无法在循环

3 个答案: