<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<style>
    .filters {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .filters label {
        margin-right: 0.5rem;
    }

    .profile-card {
        border: 1px solid #ccc;
        padding: 1rem;
        margin-bottom: 1rem;
    }
</style>
<div class="filters">
    <label for="select-city">Şehir:</label>
    <select id="select-city">
        <option value="">-- Seçiniz --</option>
        <option value="istanbul">İstanbul</option>
        <option value="ankara">Ankara</option>
        <option value="izmir">İzmir</option>
    </select>

    <label for="select-district">İlçe:</label>
    <select id="select-district">
        <option value="">-- Seçiniz --</option>
        <option value="kadikoy">Kadıköy</option>
        <option value="besiktas">Beşiktaş</option>
        <option value="fatih">Fatih</option>
    </select>

    <label for="select-neighborhood">Mahalle:</label>
    <select id="select-neighborhood">
        <option value="">-- Seçiniz --</option>
        <option value="moda">Moda</option>
        <option value="ciksalin">Çıksalın</option>
        <option value="karakoy">Karaköy</option>
    </select>

    <label for="select-category">Kategori:</label>
    <select id="select-category">
        <option value="">-- Seçiniz --</option>
        <option value="spor">Spor</option>
        <option value="mutfak">Mutfak</option>
        <option value="elektronik">Elektronik</option>
    </select>
</div>

<div id="profiles">
    <div class="profile-card" data-city="istanbul" data-district="kadikoy" data-neighborhood="moda" data-category="spor">
        <h3>Profil 1</h3>
        <p>Açıklama 1</p>
    </div>

    <div class="profile-card" data-city="ankara" data-district="besiktas" data-neighborhood="ciksalin" data-category="mutfak">
        <h3>Profil 2</h3>
        <p>Açıklama 2</p>
    </div>

    <div class="profile-card" data-city="izmir" data-district="fatih" data-neighborhood="karakoy" data-category="elektronik">
        <h3>Profil 3</h3>
        <p>Açıklama 3</p>
    </div>
</div>

<script>
    const selectCity = $("#select-city");
    const selectDistrict = $("#select-district");
    const selectNeighborhood = $("#select-neighborhood");
    const selectCategory = $("#select-category");
    const profiles = $("#profiles");

    function filterProfiles() {
        const selectedCity = selectCity.val();
        const selectedDistrict = selectDistrict.val();
        const selectedNeighborhood = selectNeighborhood.val();
        const selectedCategory = selectCategory.val();

        const profileCards = profiles.find(".profile-card");

        profileCards.each(function() {
            const city = $(this).attr("data-city");
            const district = $(this).attr("data-district");
            const neighborhood = $(this).attr("data-neighborhood");
            const category = $(this).attr("data-category");

            let match = true;

            if (selectedCity && selectedCity !== city) {
                match = false;
            }

            if (selectedDistrict && selectedDistrict !== district) {
                match = false;
            }

            if (selectedNeighborhood && selectedNeighborhood !== neighborhood) {
                match = false;
            }

            if (selectedCategory && selectedCategory !== category) {
                match = false;
            }

            if (match) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }

    selectCity.on("change", filterProfiles);
    selectDistrict.on("change", filterProfiles);
    selectNeighborhood.on("change", filterProfiles);
    selectCategory.on("change", filterProfiles);
</script>