선택창

1. 부트스트랩 Select 메뉴

  https://getbootstrap.com/docs/5.0/forms/select/

Select

The multiple attribute is also supported:

   Open this select menu   One   Two   Three 

 

Copy

<select class="form-select" multiple aria-label="multiple select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

 

 

2. BULMA

https://bulma.io/documentation/form/select/#multiple-select

 

Multiple select#

You can style a multiple select dropdown, by using the is-multiple modifier, and by using the multiple HTML attribute.

     Argentina     Bolivia     Brazil     Chile     Colombia     Ecuador     Guyana     Paraguay     Peru     Suriname     Uruguay     Venezuela   

<div class="select is-multiple">
  <select multiple size="8">
    <option value="Argentina">Argentina</option>
    <option value="Bolivia">Bolivia</option>
    <option value="Brazil">Brazil</option>
    <option value="Chile">Chile</option>
    <option value="Colombia">Colombia</option>
    <option value="Ecuador">Ecuador</option>
    <option value="Guyana">Guyana</option>
    <option value="Paraguay">Paraguay</option>
    <option value="Peru">Peru</option>
    <option value="Suriname">Suriname</option>
    <option value="Uruguay">Uruguay</option>
    <option value="Venezuela">Venezuela</option>
  </select>
</div>

 

 

 

 

 

3. 셀렉트박스(select)

콤보박스라고도 하며 Pull-Down Menus라고 표현하기도 합니다.

<select name="job">     <option value="">직업선택</option>     <option value="학생">학생</option>     <option value="회사원">회사원</option>     <option value="기타">기타</option> </select>

<select>태그와 <option>태그로 구성됩니다.

직업선택 학생 회사원 기타

<option> 태그에서 사용하는 value 속성은 텍스트 필드에서의 value 속성과는 조금 틀립니다. 텍스트 필드에서 value 속성에 값을 입력하면 기본값이 입력되지만 <option> 태그의 경우는 이 <option>이 선택된 경우 전송되는 값을 지정하는 것입니다.

위의 예제에서 학생을 선택된채로 폼을 전송했다면 job 필드의 value값은 <option value="학생">의 value값인 "학생"으로 지정됩니다.

기본값으로 회사원이 선택되게 할려면 selected 속성을 사용해야 합니다.

<select name="job">     <option value="">직업선택</option>     <option value="학생">학생</option>     <option value="회사원" selected="selected">회사원</option>     <option value="기타">기타</option> </select>

아래와 같이 회사원이 선택된채로 출력됩니다.

직업선택 학생 회사원 기타

<optgroup>은 HTML 4 버전에서 새로 만들어진 태그로 옵션에 카테고리를 만들 수 있습니다. 대부분의 웹브라우저에서 지원하고 있다.

<select name="hobby">      <option value="독서">독서</option>      <optgroup label="스포츠">         <option value="야구">야구</option>         <option value="축구">축구</option>      </optgroup>      <option value="음악감상">음악감상</option> </select>

스포츠라는 카테고리를 만들고 야구와 축구 옵션을 추가하였습니다.

독서  야구 축구  음악감상

출처 : http://www.homejjang.com/05/select.php

셀렉트박스(select) - HTML 고급 강좌

 

4. https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions

HTMLSelectElement.selectedOptions - Web APIs | MDN

JavaScript

The JavaScript code that establishes the event handler for the button, as well as the event handler itself, looks like this:

let orderButton = document.getElementById("order");
let itemList = document.getElementById("foods");
let outputBox = document.getElementById("output");

orderButton.addEventListener("click", function() {
  let collection = itemList.selectedOptions;
  let output = "";

  for (let i=0; i<collection.length; i++) {
    if (output === "") {
      output = "Your order for the following items has been placed: ";
    }
    output += collection[i].label;

    if (i === (collection.length - 2) && (collection.length < 3)) {
      output +=  " and ";
    } else if (i < (collection.length - 2)) {
      output += ", ";
    } else if (i === (collection.length - 2)) {
      output += ", and ";
    }
  }

  if (output === "") {
    output = "You didn't order anything!";
  }

  outputBox.innerHTML = output;
}, false);

Copy to Clipboard

This script sets up a click event listener on the "Order Now" button. When clicked, the event handler fetches the list of selected options using selectedOptions, then iterates over the options in the list. A string is constructed to list the ordered items, with logic to build the list using proper English grammar rules (including a serial comma).

Result

The resulting content looks like this in action: