Onchange 不能循环工作

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 的更改事件，您必须通过将迭代器值附加到 id 来使其唯一。

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

Answer 2

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

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

和

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

同样获取另一个下拉列表的值。

Answer 3

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>

脚本

$(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);
    });
});