생활코딩/WEBn

[Node.js & MySQL] 목록 콤보박스 생성 / 디폴트값 설정

hayjo 2021. 1. 5. 21:03

DB에서 가져온 데이터를 반복문을 이용해 html 콤보박스(<select><option>) 형태로 작성

그중 원하는 데이터를 디폴트로 설정(selected)

 

[강의 출처] opentutorials.org/course/3347/21193


 

html에서 콤보박스를 생성하는 태그는 select다.

<select name="전송되는 데이터 이름">
    <option value="1">Value1</option>
    <option value="2">Value2</option>
    <option value="3">Value3</option>
</select>

이 박스에서 Value1을 선택하고 해당 FormData를 전송하면, 데이터는 {"전송되는 데이터 이름": "1"}처럼 객체형태로 전달된다.

이 기능과 반복문을 이용해 특정한 데이터로 콤보박스를 생성할 수 있다.

(MDN Web Docs js 루프와 반복 페이지에도 비슷한 예시가 있으니 나중에 헷갈리면 참조!)

 

자바스크립트의 배열을 이용해 콤보박스를 생성하는 경우:

var sample = [{ id: 1, title: 'Google', name: 'banana', description: 'fruit' },
              { id: 2, title: 'Apple', name: 'apple', description: 'fruit' }
              ];

var tag = '<select>\n';
for(var i=0; i<sample.length; i++){
	tag += `    <option value=${sample[i].id}>${sample[i].name}</option>\n`;
}
tag += '</select>';


/*
"<select>
    <option value=1>banana</option>
    <option value=2>apple</option>
</select>"
*/

 

데이터를 MySQL로부터 불러와서 진행하는 경우:

var mysql = require('mysql');

var db = mysql.createConnection({
	  host     : 'localhost',
	  user     : 'root',
      password : 'password',
      database : 'database'
	});

db.connect();

db.query('SELECT * FROM dbname', function(err, result){
    var tag = '<select>\n';
    for (var data of result){
        tag += `<option value=${data.id}>${data.title}</option>`;
    };
    tag += '</select>'
    // 이제 tag를 html 페이지로 넘겨서 작성하면 완료;
});

 

 

콤보박스에서 기본값을 설정하려면 <option> 태그 안에 selected를 넣어주면 된다.

<select name="전송되는 데이터 이름">
    <option value="1">Value1</option>
    <option value="2" selected>Value2</option>
    <option value="3">Value3</option>
</select>

 

사용자가 있는 위치를 기본값으로 하고싶다면, 반복문에서 사용자의 위치 여부를 판단하고, 해당 위치에 selected를 넣어주면 된다.

예를 들어 사용자가 있는 페이지가 3번 페이지에 있고, data.id 값이 페이지를 가리킨다면,

아래처럼 if(userIn === data.id)를 추가하면 된다.

 

var userIn = 3;

db.query('SELECT * FROM topic', function(err, result){
    for (var data of result){
        var selected = '';
            if(userIn === data.id){   // 사용자의 위치가 해당 id인지 비교
                selected = ' selected'
            };
            tag += `<option value=${data.id} selected>${data.title}</option>`; // 여기 추가
    };
    tag += '</select>'
});