[form] HTML - <select> 태그 ★ - 선택메뉴 (= select태그 = 실렉트태그 = 셀렉트태그) (HTML5수정) ※ 새창열기/현재창열기

목차

1. <select> 예제 - 선택메뉴
2. <select> 정의
3. <select> 구문
4. <select> 속성
5. <select> 예제 - select option 메뉴링크를 새창/현재창 열기
6. <select> 예제 - select 요소의 화살표 제거
7. <select> 예제 - 현재 선택된 메뉴 표시 (= 현재메뉴에 불넣기)

<select> 예제 - 선택메뉴

<select> 정의

 

클릭하면 밑으로 펼쳐지는 선택 메뉴 (=드롭다운 선택메뉴) 생성.

 

---

 

1. cf.

<option> 태그 - <select> 태그 내부에서 선택 사항 나열.

 

2.

아래 쪽에 드롭 공간 없으면 자동으로 위로 열림.

 

3.

• 사용자에게 보이는 선택 사항은 <option>태그 안 텍스트이고,
• <input>・<button> 이용해 선택값을 서버에 전달할 때는 <option> 태그 속성 중 "value" 임.
• 따라서, <option value="선택1">선택1</option>처럼 적어줘야 정상 작동.

 

4.

<form> 태그 내부에서 사용자에게 입력 사항을 선택하게 할 때 사용 가능

 

5.

키보드 접근성을 위해서 자바스크립트를 이용해 디자인하지 않도록 함.

 

6.

시작태그와 종료태그로 구성

 

<select> 구문

 

<select>
  <option value="선택사항1">선택사항1</option>
  <option value="선택사항2">선택사항2</option>
</select>

 
결과 보기

<select> 속성

<select> 예제 - select option 메뉴링크를 새창/현재창 열기

새창으로 열기

<select onchange="if(this.value) window.open(this.value);">

    <option value="">홈페이지 선택</option>

    <option value="https://homzzang.com">홈짱닷컴</option>

    <option value="https://sir.kr">그누보드</option>

</select>

 

결과보기 

---

현재창으로 열기

<select onchange="if(this.value) location.href=(this.value);">

    <option value="">홈페이지 선택</option>

    <option value="https://homzzang.com">홈짱닷컴</option>

    <option value="https://sir.kr">그누보드</option>

</select>

 

결과보기 

<select> 예제 - select 요소의 화살표 제거

 

CSS appearance 속성 이용하면 됨.

https://homzzang.com/b/css-247

 

<select> 예제 - 현재 선택된 메뉴 표시 (= 현재메뉴에 불넣기)

※ 배추빌더5 게시판 이동 경우

 

<select class="hz" onchange="location.href=this.value">

    <option value="https://homzzang.com/b/html">HTML</option>

    <option value="https://homzzang.com/b/css">CSS</option>

    <option value="https://homzzang.com/b/js">JS</option>

</select>

<script>

$('.hz option[value*="<php echo $bo_table ?>"]').prop('selected', true);

</script>