[javascript] selectbox 선택에 따라 두번째 selectbox 값 변화

selectbox의 선택에 따라 두번째 selectbox의 값이 변해야하는 경우가 있습니다.

지역 선택을 해야할 때나 품목 선택을 해야할 때가 그런 경우죠.

이때 사용하게 되는 것이, 해당하는 객체 값이 변할 때 발생하는 이벤트 함수인 onchange라는 함수입니다.

예제를 먼저 살펴볼까요. 먼저  html 부분에 해당 예제소스를 넣어주세요. 

<select onchange="categoryChange(this)">
	<option>걸그룹을 선택해주세요</option>
	<option value="a">블랙핑크</option>
	<option value="b">에프엑스</option>
	<option value="c">EXID</option>
</select>

<select id="good">
<option>좋아하는 멤버를 선택해주세요</option>
</select>

지극히 개인취향적인 걸그룹이 담긴 selectbox에 내용을 담고 다음에 javascript 스크립트를 넣어주면 완성입니다.

function categoryChange(e) {
	var good_a = ["지수", "제니", "로제", "리사"];
	var good_b = ["빅토리아", "엠버", "루나", "크리스탈"];
	var good_c = ["LE", "하니", "정화", "혜린", "솔지"];
	var target = document.getElementById("good");

	if(e.value == "a") var d = good_a;
	else if(e.value == "b") var d = good_b;
	else if(e.value == "c") var d = good_c;

	target.options.length = 0;

	for (x in d) {
		var opt = document.createElement("option");
		opt.value = d[x];
		opt.innerHTML = d[x];
		target.appendChild(opt);
	}	
}

[javascript] 간단한 탭메뉴 구현하기

 예전에 보다 간단한 탭메뉴를 찾으려 열심히 구글링했던 때가 있었는데요, 

거기서 단비처럼 찾아낸 탭메뉴를 구현해볼까 합니다. 코드도 무척 단순해서 따라하시기 쉬우실거에요.

먼저  CSS에 해당 소스를 넣어주세요. html의 <style></style> 사이로 넣어주셔도 좋습니다.

body{
	margin-top: 100px;
	font-family: 'Trebuchet MS', serif;
	line-height: 1.6
}
.container{
	width: 500px;
	margin: 0 auto;
}



ul.tabs{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul.tabs li{
	background: none;
	color: #222;
	display: inline-block;
	padding: 10px 15px;
	cursor: pointer;
}

ul.tabs li.current{
	background: #ededed;
	color: #222;
}

.tab-content{
	display: none;
	background: #ededed;
	padding: 15px;
}

.tab-content.current{
	display: inherit;
}

  <div class="container">

	<ul class="tabs">
		<li class="tab-link current" data-tab="tab-1">메뉴_하나</li>
		<li class="tab-link" data-tab="tab-2">메뉴_둘</li>
		<li class="tab-link" data-tab="tab-3">메뉴_셋</li>
	</ul>

	<div id="tab-1" class="tab-content current">
---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ----
	</div>
	<div id="tab-2" class="tab-content">
---- ---- ★------ ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ★-- ---- ---- ------★ ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- ★------ ---- ---- ---- ----
	</div>
	<div id="tab-3" class="tab-content">
---- ★-- -------- ---- ---- ---- -★- ---- ---- -------- ---- -★- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- --★ -------- ★-- ---- ---- ---- ---- ---- -------- ---- ---- --★ ---- ---- ---- -------- ---- ---- ---- --★
	</div>

</div>

$(document).ready(function(){
	
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	})

})

참고: https://codepen.io/cssjockey/pen/jGzuK

[javascript] 심플 이미지 슬라이더

단순하게 페이드인, 페이드아웃을 반복하면서 이미지를 보여주는 심플 이미지 슬라이더입니다. 

이전, 다음 버튼 없이 이미지만 자동으로 움직이죠. 코드도 무척 단순합니다. 

먼저 html 부분에 해당 예제소스를 넣어주세요. 

(예제 소스에 있는 jpg는 가지고 계시는 이미지로 써주시면 됩니다.)

<div id="slideshow">
   <div>
     <img src="http://imivory.me/img/noname/1.jpg">
   </div>
   <div>
     <img src="http://imivory.me/img/noname/2.jpg">
   </div>
   <div>
     <img src="http://imivory.me/img/noname/3.jpg">
   </div>
</div>

그 다음 CSS에 해당 소스를 넣어주세요. html의 <style></style> 사이로 넣어주셔도 좋습니다.

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

출처: https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/