index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select Relations JS - Deirvlon Technologies</title>
    <meta name="author" content="Kamran Gasimov">
</head>
<body>
    <h1>Select Relations JS - Example</h1>
    <div class="container">
        <select id="countrySelect" class="select-relations">
            <option value="USA">USA</option>
            <option value="Canada">Canada</option>
        </select>
        <select id="citySelect" class="select-relations" data-sf-parent="countrySelect">
            <option value="New York" data-pr="countrySelect:USA">New York</option>
            <option value="Los Angeles" data-pr="countrySelect:USA">Los Angeles</option>
            <option value="Toronto" data-pr="countrySelect:Canada">Toronto</option>
            <option value="Vancouver" data-pr="countrySelect:Canada">Vancouver</option>
        </select>
        <select id="regionSelect" class="select-relations" data-sf-parent="citySelect">
            <option value="Manhattan" data-pr="citySelect:New York">Manhattan</option>
            <option value="Brooklyn" data-pr="citySelect:New York">Brooklyn</option>
            <option value="Hollywood" data-pr="citySelect:Los Angeles">Hollywood</option>
            <option value="Downtown" data-pr="citySelect:Los Angeles,citySelect:Toronto">Downtown</option>
            <option value="North Vancouver" data-pr="citySelect:Vancouver">North Vancouver</option>
            <option value="West Vancouver" data-pr="citySelect:Vancouver">West Vancouver</option>
        </select>
    </div>


    <!-- Select Relations JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="select-relations.js"></script>
</body>
</html>