python flask javascript에서 dropdown 만들기

DB에서 목록을 불러와 Dropdown list에 추가해보자.

1. DB에서 목록 불러오기

gamelist 배열에 저장된 값은 아래와 같다.

2. javascript dropdown list 만들기

gamelist 를 받은 index.html에서 dropdown list를 표시할 영역에 아래와 같이 html 코드를 적는다.

1	<div id="myDiv">Game List </div>

javascript 코드 영역에 아래와 같이 적는다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<script type="text/javascript"> var myDiv = document.getElementById("myDiv"); //Create array of options to be added var array = {{ gamelist|tojson }}; //Create and append select list var selectList = document.createElement("select"); selectList.setAttribute("id", "mySelect"); myDiv.appendChild(selectList); //Create and append the options for (var i = 0; i < array.length; i++) { var option = document.createElement("option"); option.setAttribute("value", array[i]); option.text = array[i]; selectList.appendChild(option); } </script>

3. 결과 화면

4. 보너스. dropdown에서 선택된 list 값 읽기

위 결과 화면에서 Show 버튼을 클릭하면 실행되는 아래 함수

1 2 3 4 5

function show() { var e = document.getElementById("mySelect"); var strUser = e.options[e.selectedIndex].value; Sijax.request('show_current',[strUser]); }

strUser 변수에 선택된 list 값이 저장되어 있다.