Php опция выбора фильтра

Question

Я пытаюсь сделать опцию фильтра, используя выпадающий список выбора, и я не знаю, где у меня не получается. У меня есть панель поиска, которая отлично работает, но я хочу выбрать место, где я хочу искать. Например, я могу напечатать название работы, которую я ищу, но я хотел бы отфильтровать местоположения, чтобы просматривать только в одном городе. Вот мой код

Редактировать: Благодаря ADyson я внес некоторые изменения в код Я выложу новый код поверх последнего

        <?php
    require 'views/header.php';
    $connection = getDbConntection();

    // Search // 
    if (!empty($_GET['search'])) {

        $data = [
            'job_name' => '%' . $_GET['search'] . '%',
            'location_id' => $_GET['location_id']
        ];
        $searches = $connection->prepare("select jobs.id, jobs.name as job_name, salary as job_salary, description, location_id, domain_id , locations.name as location_name , domains.name as domain_name from jobs 
    LEFT JOIN locations ON jobs.location_id = locations.id
    LEFT JOIN domains on jobs.domain_id = domains.id "
                . "where jobs.name like :job_name"
                . 'AND location_id = :location_id');
        $searches->execute($data);
        $searches= $query->fetchAll();
    // List // 
    } else {
        $query = $connection->query("select jobs.id, jobs.name as job_name, salary as job_salary, description, location_id, domain_id , locations.name as location_name , domains.name as domain_name from jobs 
    LEFT JOIN locations ON jobs.location_id = locations.id
    LEFT JOIN domains on jobs.domain_id = domains.id ");
        $searches = $query->fetchAll();
    }
    ?>

    <div class="w3-row-padding w3-padding-64 w3-container">
        <div class="w3-content">

            <h1 class="center"> Jobs table </h1>
            <br>
            <form style="text-align:center" action="index.php" method="GET">
                <input type="text" name="search" value="Search jobs..." onfocus="this.value = ''" class="btn btn-danger">
                <select name="location_id"  class="btn btn-danger">
                    <?php foreach ($searches as $location): ?>
                        <?php $selectedText = ($location['id']) ?>
                        <option value= <?= $selectedText ?> > <?= $location['location_name'] ?></option>
                    <?php endforeach; ?>
                </select>
                <input type="submit" value="Search" class="btn btn-danger">
                <a href="index.php" class="btn btn-danger">Back to list </a>
            </form>
            <br>

            <div  class="center">
                <table>
                    <tr>
                        <th>ID</th>
                        <th> Job Name</th>
                        <th> Job Location</th>
                        <th> Job Domain</th>
                        <th> Job Description</th>
                        <th> Job Salary</th>

                        <th>Actions</th>
                    </tr>
                    <?php foreach ($searches as $key => $job_name) : ?>
                        <tr>
                            <th><?= $job_name['id'] ?></th>
                            <th style="background-color: lightskyblue"><?= $job_name['job_name'] ?></th>
                            <td><?= $job_name['location_name'] ?></td>
                            <td><?= $job_name['domain_name'] ?></td>
                            <td><?= $job_name['description'] ?></td>
                            <td><?= $job_name['job_salary'] ?></td>
                            <td> <a  class="btn btn-success" href="edit.php?id=<?= $job_name['id'] ?>">&nbsp; &nbsp; Edit &nbsp;</a> 
                                <a class="btn btn-danger" href="delete.php?id=<?= $job_name['id'] ?>">Delete</a> </td>
                        </tr>
                    <?php endforeach; ?>
                </table>  
            </div>

            <style>
                table td, table th {
                    padding: 15px;
                    text-align: center;

                }
                table th {
                    background:#3390FF;
                }
                table {
                    width: 100%;
                    border: 3px solid #ccc;
                    border-collapse: collapse;
                }

                .ce

nter {
                margin: auto;
                width: 100%;
                border: 3px solid red;
                padding: 10px;
                text-align: center;
            }
        </style>
    </div>
</div>

Извините за грязный код, я новичок в кодировании в целом

Answer 1

Благодаря ADysom я решил проблему, вот правильный код

<?php
require 'views/header.php';
$connection = getDbConntection();

$locations = $connection->query("select * from locations");

// Search // 
if (!empty($_GET['search'])) {

    $data = [
        'job_name' => '%' . $_GET['search'] . '%',
        'location_id' => $_GET['location_id']
    ];
    $query = $connection->prepare("select jobs.id, jobs.name as job_name, salary as job_salary, description, location_id, domain_id , locations.name as location_name , domains.name as domain_name from jobs 
LEFT JOIN locations ON jobs.location_id = locations.id
LEFT JOIN domains on jobs.domain_id = domains.id "
            . "where jobs.name like :job_name "
            . "AND location_id = :location_id ");
    $query->execute($data);
    $query = $query->fetchAll();
//    print_r($_GET);
// List // 
} else {
    $query = $connection->query("select jobs.id, jobs.name as job_name, salary as job_salary, description, location_id, domain_id , locations.name as location_name , domains.name as domain_name from jobs 
LEFT JOIN locations ON jobs.location_id = locations.id
LEFT JOIN domains on jobs.domain_id = domains.id ");
    $query = $query->fetchAll();
}
?>

<div class="w3-row-padding w3-padding-64 w3-container">
    <div class="w3-content">

        <h1 class="center"> Jobs table </h1>
        <br>
        <form style="text-align:center" action="index.php" method="GET">
            <input type="text" placeholder='Search jobs..' name="search"  onfocus="this.value = ''" class="btn btn-danger">
            <select name="location_id"   class="btn btn-danger">
                <?php foreach ($locations as $location): ?>
                    <option value="<?= $location['id'] ?>">
                        <?= $location['name'] ?>
                    </option>
                <?php endforeach; ?>
            </select>
            <input type="submit" value="Search" class="btn btn-danger">
            <a href="index.php" class="btn btn-danger">Back to list </a>
        </form>
        <br>

        <div  class="center">
            <table>
                <tr>
                    <th>ID</th>
                    <th> Job Name</th>
                    <th> Job Location</th>
                    <th> Job Domain</th>
                    <th> Job Description</th>
                    <th> Job Salary</th>

                    <th>Actions</th>
                </tr>
                <?php foreach ($query as $key => $job_name) : ?>
                    <tr>
                        <th><?= $job_name['id'] ?></th>
                        <th style="background-color: lightskyblue"><?= $job_name['job_name'] ?></th>
                        <td><?= $job_name['location_name'] ?></td>
                        <td><?= $job_name['domain_name'] ?></td>
                        <td><?= $job_name['description'] ?></td>
                        <td><?= $job_name['job_salary'] ?></td>
                        <td> <a  class="btn btn-success" href="edit.php?id=<?= $job_name['id'] ?>">&nbsp; &nbsp; Edit &nbsp;</a> 
                            <a class="btn btn-danger" href="delete.php?id=<?= $job_name['id'] ?>">Delete</a> </td>
                    </tr>
                <?php endforeach; ?>
            </table>  
        </div>

        <style>
            table td, table th {
                padding: 15px;
                text-align: center;

            }
            table th {
                background:#3390FF;
            }
            table {
                width: 100%;
                border: 3px solid #ccc;
                border-collapse: collapse;
            }

            .center {
                margin: auto;
                width: 100%;
                border: 3px solid red;
                padding: 10px;
                text-align: center;
            }
            ::placeholder { 
                color: white;
                opacity: 1; 
            }
        </style>
    </div>
</div>