코딩하는 핑구

html 페이지에서 메뉴를 선택하고 선택한 정보를 출력하고 싶어서 사용해본 셀렉트 태그

아래의 빈 공백은 텍스트입력하는 input 태그이므로 신경안써도됨

html

<select class="form-control" id="menu" name="menu" required>
    <option value="" disabled selected>메뉴</option>
    <option value="boong">붕어빵</option>
    <option value="tako">타코야키</option>
    <option value="ddang">땅콩과자</option>
    <option value="other">그 외 간식</option>
</select>

select 태그에 required 속성을 덧붙여주면 해당 셀렉트 태그의 선택이 필수 선택으로 지정된다

나중에 form 형식에 셀렉트 태그를 넣은 다음 서버로 정보를 전달할 때 쏠쏠함

회원가입 경우, *필수 입력 정보가 필요할 때 쓰면된다

위의 이미지를 바탕으로 기록해보면

메뉴에 대해서 반드시 옵션 값을 선택해야하며, 메뉴라고 적혀있는 옵션 값은 선택이 불가능하다

각각의 메뉴의 value 값은 자바스크립트에서 데이터를 얻어올 때 유용하게 쓰인다

사용자에게 보여질 텍스트는 옵션 태그 사이에 넣어주면 된다

javascript

async function register(){
	var menu = document.getElementById("menu").value;
	console.log("선택한 메뉴 : "+menu);
}

위의 코드처럼 작성해보면 선택한 메뉴를 출력해볼 수 있다

저장이 필요하다면 위의 방식처럼 옵션의 value에 접근하여 저장하거나 데이터를 가공하면 되겠다

좀더 고급지게 작성할 수 있는데 일단 제일 쉽고 간단한 방법을 사용했음

다양한 방법을 덧붙인 사용을 원하면 아래 mdn 참고하자

참고 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/select#attr-disabled