코드이그나이터4 뷰 다루기 - 5 - 선택 상자 (select option)

선택 상자

여러개의 항목 중 하나를 선택하는 선택 상자에 대해 알아보겠습니다. 일반적으로 항목이 적고 한번에 항목을 봐야 할 때는 라디오 버튼을, 선택할 항목이 많다면 선택 상자를 통해 UI를 구성합니다.
우리가 만들 페이지는 아래와 같습니다.

이번 챕터의 코드는 https://github.com/koeunyeon/ci4/tree/view-selectoption에서 찾을 수 있습니다.

View 컨트롤러에 아래의 메소드를 추가합니다.
app/Controllers/View.php

public function selectoption(): string
{
    $sports_data = [
        "baseball" => "야구",
        "soccer" => "축구",
        "basketball" => "농구",
    ];

    $selected = $this->request->getPost("sports") ?? "baseball";

    return View("/view/selectoption",
        [
            "sports_data" => $sports_data,
            "selected" => $selected
        ]
    );
}

컨트롤러는 라디오 버튼과 완전히 동일합니다. 반환하는 뷰만 다르므로 설명은 생략하겠습니다.

뷰를 추가하겠습니다.
app/Views/view/selectoption.php

<form method="POST">
    <select name="sports"> <!-- (1) -->
    <?php foreach ($sports_data as $sports_key => $sports_name) : ?>
        <option value="<?= $sports_key ?>" <?= $selected == $sports_key ? "selected='selected'" : '' ?> >  <!-- (2) -->
            <?= $sports_name ?> <!-- (3) -->
        </option>
    <?php endforeach; ?>
    </select> <!-- (4) -->
    <p><input type="submit" value="확인"/></p>
</form>

(1) 선택상자를 보여주기 위한 HTML 태그는 select입니다. 서버로 전달할 "키"를 select 태그에서 선택합니다.

(2) 선택상자의 항목들을 보여주기 위한 태그는 option입니다. 서버로 전달할 "값"을 value 속성으로 설정합니다.

(3) 사용자에게 보여주는 라벨은 <option> 태그와 </option> 태그 사이에 넣으면 됩니다.

(4) select 태그는 반드시 닫아야 합니다.

브라우저에서 http://localhost:8080/view/selectoption에 접속해 결과를 확인합니다.