생활코딩/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>'
});