0914-練習6-下拉式選單連動.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select option change</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    </script>
    <style>

    </style>
</head>

<body>

    <div class="container mt-5">
        <div class="row"></div>
        <form action="">
            <div class="form-row">

                <div class="form-group">
                    <select name="city" id="city" class="form-control">
                        <option value="0">基隆</option>
                        <option value="1">台北</option>
                        <option value="2">新北</option>
                    </select>
                </div>

                <div class="form-group">
                    <select name="district" id="district" class="form-control">
                        <option value="0">七堵</option>
                        <option value="1">中正</option>
                        <option value="2">暖暖</option>
                    </select>
                </div>
            </div>
        </form>
    </div>


    <script>
        let districtObj = [
            ["七堵", "中正", "暖暖"],
            ["中正", "大安", "信義"],
            ["蘆洲", "三重", "新店"],
        ];

        // 用for迴圈
        // $("#city").change(function () {
        //     let cityIndex = $(this).val();
        //     // console.log("hi", $(this).val());
        //     for (let i = 0; i < 3; i++) {
        //         $("#district option").eq(i).text(districtObj[cityIndex][i]);
        //     }
        // });


        // 用.each()
        // $("#city").change(function () {
        //     const city_index = $(this).val();

        //         $("#district option").each(function(){
        //             $(this).text(districtObj[city_index][$(this).val()]);
        //         })
        // });


    </script>
</body>

</html>