이런 느낌으로 만들고자 한다.
맨위에는 내가 보고싶은 웹툰들을 선택하는 곳이다. 처음 중식이 있는 부분은 네이버, 다음, 카카오페이지 등 홈페이지를 선택하고 뒤에 선택부분에 각각의 웹툰을 선택한다. 클릭부분에서 웹툰을 하나씩 추가한다. 삭제버튼도 하나 만들 예정이다.
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
.select{
width : 200px;
}
</style>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var f_selbox = ['한식', '중식', '일식', '양식'];
var s_selbox = [['김치찌게', '된장찌게', '불고기', '설렁탕', '뼈해장국'],
['탕수육', '팔보채', '깐풍기'],
['초밥', '덮밥', '문어구이'],
['스테이크', '캐비어', '푸아그라', '파스타']];
var selectBrand = $('#brand');
$(function(){
$('#brand').change(function(){
var selectValue = $('#brand').val();
var subSelectValue = $('#sub_brand');
subSelectValue.children().remove();
subSelectValue.append('<option value="1">선택</option>');
if(selectValue == '한식'){
for(var i = 0; i<s_selbox[0].length; i++)
subSelectValue.append('<option value="1">'+s_selbox[0][i] +'</option>');
}
else if(selectValue == '중식'){
for(var i = 0; i<s_selbox[1].length; i++)
subSelectValue.append('<option value="1">'+s_selbox[1][i] +'</option>');
}
else if(selectValue == '일식'){
for(var i = 0; i<s_selbox[2].length; i++)
subSelectValue.append('<option value="1">'+s_selbox[2][i] +'</option>');
}
else if(selectValue == '양식'){
for(var i = 0; i<s_selbox[3].length; i++)
subSelectValue.append('<option value="1">'+s_selbox[3][i] +'</option>');
}
});
});
//console.log(s_selbox[1])
</script>
</head>
<body>
<div>
<select id="brand" class="select">
<option value="한식">한식</option>
<option value="중식">중식</option>
<option value="일식">일식</option>
<option value="양식">양식</option>
</select>
<select id="sub_brand" class="select">
</select>
<input type="button" value="클릭"/>
</div>
</body>
</html>
위의 소스는 맨 윗부분 웹툰을 선택하는 select부분이다.
예제는 한식,중식 을 예제로 만들었다.
지금까지 한것은 json포맷으로 업데이트 된것 받아오기, html틀 약간을 하였고
이제 json 포맷과 html을 연결하는 부분을 해보자 한다.
'미니 프로젝트 > 나만의 웹툰 목록 만들기' 카테고리의 다른 글
| JSON 파싱으로 그날나온 웹툰 모움 및 즐겨찾기 (0) | 2016.02.05 |
|---|---|
| 웹툰 스크래핑 2 (0) | 2016.02.01 |
| 네이버 웹툰 업데이트 된것 제목 긁어오기 (0) | 2016.01.29 |
| cheerio, request를 활용한 스크래핑 맛보기 (0) | 2016.01.28 |
| JSON 포맷 형식 (0) | 2016.01.28 |