2017-01-13 16 views
6

Tôi gặp vấn đề với thay đổi jQuery được kết nối với thẻ được chọn. Nó bắn hai lần, lần thứ hai trở về mảng trống. jQuery hoặc JS không được bao gồm hai lần, đã được kiểm tra.jQuery trên trình kích hoạt thay đổi hai lần trên một số lựa chọn

Tôi sẽ rất biết ơn sự giúp đỡ nào trong lĩnh vực này :)

JS

$(".select-car").on("change", function(){ 
    var cars = []; 
    var carType = $(this).val(); 
    $.getJSON("js/cars.json", function(data) { 
     $.each(data, function(i, item) { 
     // console.log(item); 
     if(item.type === carType) { 
      cars.push(item); 
     } 
     }); 
    }); 
    console.log(cars); 
    }); 

HTML

<!DOCTYPE html> 
<html lang="pl"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 

    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/main.css"> 
    <title>Wyporzyczalnia samochodów</title> 
</head> 
<body> 

    <main class="container main-container"> 
    <div class="row select-car"> 
     <div class="col-md-12 header"> 
     <h2 class="page-header">Wybierz typ samochodu</h2> 

     <form action=""> 
      <select name="cartype" class="form-control select-car"> 
      <option value="" selected="true" disabled>---</option> 
      <option value="camper">Camper</option> 
      <option value="limuzyna">Limuzyna</option> 
      <option value="osobowy">Osobowy</option> 
      </select> 
     </form> 
     </div> 
    </div> <!-- Select car --> 

    <div class="row avaible-cars"> 


    </div> 


    </main> 

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/main.js"></script> 
</body> 
</html> 
+1

Hãy thử cách này: http://api.jquery.com/one/ – Abhi

+0

[Làm cách nào để trả lại phản hồi từ cuộc gọi không đồng bộ?] (// stackoverflow.com/q/14220321) – Tushar

+0

Tại sao bạn sử dụng ' console.log (ô tô), 'bên ngoài' $ .getJSON'? – 31piy

Trả lời

4

Bạn có hai lớp .select-car

<div class="row select-car"> 

và trong

<select name="cartype" class="form-control select-car"> 

nào đang gây ra này được gọi là hai lần. Và do đó đã liên kết sự kiện thay đổi hai lần.

+0

Happy coding :): P và cũng chọn câu trả lời nếu nó giải quyết truy vấn của bạn. – squiroid

+0

Vẫn phải đợi 5 phút :) – Ganga

+0

Thực hành tốt là phân biệt các lớp để tạo kiểu (chỉ được sử dụng trong các tệp 'css') từ những tệp cho tương tác javascript (chỉ được sử dụng trong tệp' js'). Trong ví dụ của bạn, để tạo kiểu cho div sử dụng 'select-car' và để thiết lập trình xử lý sự kiện, sử dụng' js-select-car' – Konstantin

Các vấn đề liên quan