<HTML>
<HEAD>
</HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script
src="https://code.jquery.com/jquery-3.6.3.slim.min.js"
integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo="
crossorigin="anonymous"></script>
<script>
const gv_key_1 = '1';
const gv_key_2 = '2';
const gv_key_3 = '3';
var list = [ {"key":"1", "value":"EMail"}
, {"key":"2", "value":"Cellphone"}
, {"key":"3", "value":"Address"} ];
</script>
<style>
#type { width: 100px;}
</style>
<!-- test.js를 생성해서 구현할 것.-->
<SCRIPT SRC="test3.js"></script>
<BODY>
<DIV>
<select id="list1">
</select>
<br/>
<br/>
<div id="data">
</div>
</DIV>
</BODY>
</HTML>
문제:
1. 화면 로딩 시 list의 key를 value, value를 text로 하는 select-option 초기화
2. 콤보박스의 값이 바뀌면 div data의 내용이 바뀌도록 구현
3. 값이 바뀔때 list를 검색하여 일치하는 value값을 아래 텍스트 위치에 출력
<span id="type">텍스트</span>
4. input 태그를 <span></span> 안에 생성하도록 출력
5. span의 css 너비가 적용되도록 스타일 설정