셀렉트박스 url 이동

셀렉트박스 url 이동

팀원들과 공유할 작업목록이나 라우터 효과를 모방한 셀렉트 url 이동기능

<div class="header">
		<h1 class="title">
			<span> class="title_brand">박보영</span><span> class="title_sub">사진전</span>
		</h1>
		<div class="tabs"><select> class="selectbox"></select></div>
	</div>
	<div class="contents">
		<h2> class="heading">광고영상</h2>
		<div class="iframe">
			
		</div>
	</div>

//select option에 추가될 객체
var $href = {
  '웃을때': 'smile',
  '귀여울때': 'cutty',
  '광고영상': 'ad',
  '브이로그': 'vlog',
  '뮤직비디오': 'mv'
};

function nav(){
  this.init();
  this.addEvent();
}

nav.prototype.init = function(){
  for(var i in $href){
    $('<option>', {
	  value: $href[i] +'.html',
	  'data-opt': location.pathname.split('/')[ location.pathname.split('/').length -1 ].split('.')[0],
	  text: i
	}).appendTo( $('.selectbox') );
  }
}

nav.prototype.addEvent = function(){
  $('.selectbox').change(function(e){
	//location.href = location.host + $(e.currentTarget).val();
	var clickHref = $(e.currentTarget).val();
	var pathName = location.pathname;
	var pathNameLen = pathName.length;
	var replaceStart = pathName.indexOf( pathName.split('/')[ pathName.split('/').length-1 ] );
	//console.log( clickHref ); //클릭한 href
	//console.log( pathName );  //origin제외한 pathname
	//console.log( replaceStart ); //현재 location에서 page name 시작위치
	//console.log( pathName.replace( pathName.substring(replaceStart, pathNameLen), clickHref ) ); //href 치환
	location.href = location.origin + pathName.replace( pathName.substring(replaceStart, pathNameLen), clickHref );
  });
	
	var pathName = location.pathname;
	var locationPageName = pathName.split('/')[ pathName.split('/').length-1 ].split('.')[0];

	//console.log( locationPageName ); //현재 location page name
	var selArr = [];
	for(var i in $href){
		selArr.push( $href[i] );
	}
	//console.log( selArr, selArr.indexOf(locationPageName) );
	$('.selectbox').find('option:eq('+ selArr.indexOf(locationPageName) +')').attr('selected','selected');
}
new nav();

리플레시를 해도 계속 현재 url에 머문다.
목록현황의 업데이트 여부를 알고싶을때 사용하면 참 좋다.