비전공자 개발일기

HTML JAVASCRIPT Select option Multiple 본문

Javascript

HTML JAVASCRIPT Select option Multiple

HiroDaegu 2021. 8. 27. 00:44
728x90
SMALL
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style2.css">
  <script defer src="main2.js"></script>
</head>
<body>
  <main>
    <p>
      <label> 알파벳 선택:
        <select name="alphabet">
          <option value="A">a</option>
          <option value="B">b</option>
          <option value="C">c</option>
          <option value="D">d</option>
          <option value="E">e</option>
        </select>
      </label>
      <span>선택된 옵션(순서(selectedIndex), value, text) -> </span><b id="selectedOpt"></b>
    </p>
    <p>
      <label> Multi Option Select : 
        <form>
          <select name="selectMulti" multiple>
            <option value="A">a</option>
            <option value="B">b</option>
            <option value="C">c</option>
            <option value="D">d</option>
            <option value="E">e</option>
            <option value="F">f</option>
          </select>
          <button type="submit" name="button">SUBMIT</button>
        </form>
      </label>
      <strong>제출될 데이터를 확인하세요.</strong>
      <br><span id="multipleOpt"></span>
    </p>
  </main>
</body>
</html>
// select option
let bTag = document.getElementById('selectedOpt')
let selectAlphabet = document.querySelector('select')

function print() {
  // console.log(selectAlphabet)
  let selectAlphabetI = selectAlphabet.options.selectedIndex
  let selectValue = selectAlphabet[selectAlphabetI].value;
  // console.log(selectValue)
  let selectText = selectAlphabet[selectAlphabetI].text;
  bTag.innerText = "순서 : " + selectAlphabetI +", value : " + selectValue + ", text : " + selectText
}

selectAlphabet.addEventListener('change', print)

// multiple 
let selectMulti = document.querySelector('[name="selectMulti"]')
// console.log(selectMulti)
function mulPrint() {
  let multipleOpt = document.getElementById('multipleOpt')
  // console.log(multipleOpt)
  let checkedOpts = selectMulti.querySelectorAll(':checked')
  // console.log(checkedOpts)
  let printText = ""
  let i = 0;
  printText+="["
  for(let op of checkedOpts) {
    printText+="{"
    printText+="index:"+op.index+",";
    printText+="value:"+op.value+",";
    printText+="text:"+op.text;
    printText+="}"
    printText+=(++i!=checkedOpts.length)?", ":"";
  }
  printText+="]" 
  multipleOpt.innerText = printText;
}

selectMulti.addEventListener('change', mulPrint)
728x90
LIST

'Javascript' 카테고리의 다른 글

Javascript For loop - tree  (0) 2021.09.04
Javascript NaN  (0) 2021.09.01
Javascript Clock  (0) 2021.08.26
Javascript Login with LocalStorage  (0) 2021.08.25
Javascript  (0) 2021.08.16
'Javascript' Related Articles more