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

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 Value2 Value3

이 박스에서 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>"
*/

banana apple

 

데이터를 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>

Value1 Value2 Value3

 

사용자가 있는 위치를 기본값으로 하고싶다면, 반복문에서 사용자의 위치 여부를 판단하고, 해당 위치에 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>'
});