HTML <select> 태그와 <option> 태그 사용법

728x90

목 차

• 1. 기본 구조
• 2. 문법
• 3. <select> 태그 속성
• 3-1. name
• 3-2. id
• 3-3. multiple
• 3-4. size
• 3-5. disabled
• 4. <option> 태그 속성
• 4-1. value
• 4-2. selected
• 4-3. disabled
• 5. 예제
• 5-1. 기본 드롭다운
• 5-2. 다중 선택 가능 드롭다운
• 5-3. 비활성화 된 옵션 포함
• 5-4. 선택된 값 가져오기
• 5-5. 옵션 동적 추가

반응형

 

1. 기본 구조

• HTML의 <select> 태그는 드롭다운 목록을 생성하기 위해 사용됩니다. 사용자가 목록에서 하나 이상의 옵션을 선택할 수 있게 합니다. <select> 태그는 기본적으로 <option> 태그와 함께 사용됩니다.

 

 

---

 

2. 문법

<select name="dropdown" id="dropdown">
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  <option value="value3">Option 3</option>
</select>

• <select> 태그: 드롭다운을 감싸는 태그입니다.
• <option> 태그: 드롭다운 내의 각 옵션을 정의합니다.

기본 예제 option1 option2 option3 option4

 

---

 

 

3. <select> 태그 속성

3-1. name

• 폼 데이터 제출 시 서버로 전달되는 이름을 지정합니다.
• 예: <select name="category">

 

3-2. id

• 선택 태그를 고유하게 식별하기 위한 속성입니다.
• 예: <select id="dropdown">

 

 

3-3. multiple

• 여러 옵션을 선택할 수 있게 합니다.
• 예: <select name="categories" multiple>

 

3-4. size

• 표시되는 옵션의 개수를 설정합니다.
• 기본값은 1이며, 값을 더 높게 설정하면 드롭다운 대신 스크롤 가능한 목록으로 보입니다.
• 예: <select size="3">

 

3-5. disabled

• 드롭다운을 비활성화합니다.
• 예: <select disabled>

 

---

 

 

4. <option> 태그 속성

4-1. value

• 선택한 옵션의 값을 서버로 제출할 때 사용됩니다.
• 예: <option value="option1">Option 1</option>

 

4-2. selected

• 기본적으로 선택된 옵션을 설정합니다.
• 예: <option value="option2" selected>Option 2</option>

 

4-3. disabled

• 특정 옵션을 비활성화합니다.
• 예: <option value="option3" disabled>Option 3</option>

 

---

 

 

5. 예제

5-1. 기본 드롭다운

<select name="fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

 

5-2. 다중 선택 가능 드롭다운

<select name="colors" multiple size="4">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
</select>

 

 

5-3. 비활성화 된 옵션 포함

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="bmw" disabled>BMW</option>
  <option value="audi">Audi</option>
</select>

 

5-4. 선택된 값 가져오기

<select id="mySelect">
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
</select>

<button onclick="getValue()">Get Value</button>

<script>
  function getValue() {
    const select = document.getElementById("mySelect");
    const selectedValue = select.value; // 선택된 값
    alert("Selected value: " + selectedValue);
  }
</script>

 

 

5-5. 옵션 동적 추가

<script>
  const select = document.getElementById("mySelect");

  function addOption() {
    const option = document.createElement("option");
    option.value = "value3";
    option.text = "Option 3";
    select.add(option);
  }
</script>

<button onclick="addOption()">Add Option</button>
<select id="mySelect">
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
</select>