Untitled

  <script>
        const valuesArr = [
            {
                Id: 1,
                title: "BMW",
                img: "./img/bmw.jpeg",
            },
            {
                Id: 2,
                title: "Mercedes",
                img: "./img/mercedes.jpeg",
            },
            {
                Id: 3,
                title: "Fiat",
                img: "./img/fiat.jpeg",
            },
        ];

        const selectChange = document.querySelector(".select_change");
        const cardContainer = document.querySelector(".card_container");

        valuesArr.forEach(car => {
            selectChange.innerHTML += `
                <option value="${car.title}">${car.title}</option>
            `;
        });

        function showCars(selectedValue) {
            if (selectedValue === "All") {
                cardContainer.innerHTML = "";
                valuesArr.forEach(car => {
                    cardContainer.innerHTML += `
                        <div class="card_child">
                            <h1>${car.title}</h1>
                            <img src="${car.img}">
                        </div>
                    `;
                });
            } else {
                const selectedCar = valuesArr.find(car => car.title === selectedValue);
                if (selectedCar) {
                    cardContainer.innerHTML = `
                        <div class="card_child">
                            <h1>${selectedCar.title}</h1>
                            <img src="${selectedCar.img}">
                        </div>
                    `;
                } 
            }
        }
        
        showCars(selectChange.value);

        selectChange.addEventListener("change", () => {
            showCars(selectChange.value);
        });
    </script>