무소의 뿔처럼

select 선택 후 input에 보여주기 본문

알아두기/HTML CSS

select 선택 후 input에 보여주기

값을변경 2022. 6. 23. 15:40

select option value label - js

 

 

HTML option tag - label attribute

 

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>HTML option tag - label attribute</title>
</head>
<body>

    
      <select id="sele" onclick="name1(this)">
        <option value="100" label="Americano">아메리카노</option>
        <option value="200" label="Cafe Latte">카페라테</option>
        <option value="300" label="Cafe Au Lait">카페오레</option>
        <option value="400" label="Espresso">에스프레소</option>
    </select>

  <input id="show">
  
  <script type="text/javascript">
    
    function name1(e){
      var text = e.options[e.selectedIndex].text;
      console.log(e.options);
      document.getElementById('show').text;
      
      var sel = document.getElementById("sele");
      var show = document.getElementById("show");
      var b;
      
      if(text == '아메리카노') b="아메";
      if(text == '카페라테') b="라테";
      if(text == '카페오레') b="오레";
      if(text == '에스프레소') b="에스";
      
      show.value = b;
    }
  </script>
  
</body>
</html>
저작자표시 비영리 변경금지 (새창열림)

'알아두기 > HTML CSS' 카테고리의 다른 글

HTML) 1개의 Form, 2개의 submit  (0) 2022.08.24
textarea_ white-space: 줄바꿈  (0) 2022.02.10
'알아두기/HTML CSS' Related Articles more
Comments