반응형

multiple select로 select 목록 만들기 / 다중 select 만들기 / 목록 넣고 빼기 

left select right select


소스

<table>
	<tr>
		<th>left select</th>
		<th></th>
		<th>right select</th>
	</tr>
<tr>
	<td>
		<select multiple="multiple" id='left_list'>
			<option value='1'>1</option>
			<option value='2'>2</option>
			<option value='3'>3</option>
		</select>
	</td>
	<td>
		<button href="#" onclick="moveToRight(); return false;" class="btn">==></button>
		<br><br>
		<button href="#" onclick="moveToLeft(); return false;" class="btn"><==</button>
	</td>
	<td>
		<select multiple="multiple" id='right_list'>
			<option value='a'>a</option>
			<option value='b'>b</option>
			<option value='c'>c</option>
		</select>
	</td>
</tr>
</table>


<script>
//오른쪽에서 제거하고 왼쪽으로 옮기기
function moveToLeft() {
	$('#right_list option:selected').each(function(index, obj) {
		var value = obj.value;
		var text = obj.text;

		$('#right_list').find('option[value="'+ value +'"]').remove();
		 
		
		$('#left_list').append('<option value="'+value +'">'+text+'</option>')
	});
}

//왼쪽에서 제거하고 오른쪽으로 옮기기
function moveToRight() {
	$('#left_list option:selected').each(function(index, obj) {
		var value = obj.value;
		var text = obj.text;
		
	
		$('#left_list').find('option[value="'+ value +'"]').remove();
		 

		$('#right_list').append('<option value="'+value +'">'+text+'</option>')
	});
}
</script>

 

**기타 select 관련 control

select의 value 가져오기

//vanilla javascript
document.getElementById('select_list').value

//jquery
$('#select_list').val()

 

select의 선택한 option DOM 가져오기

//vanilla javascript
document.getElementById('select_list').options[document.getElementById('select_list').selectedIndex]

//jquery
$('#select_list option:selected')

 

선택한 option DOM의 사용자 data property 접근

<option value="111" data-sub_type="num">옵션에 이런 property가 있는 경우</option>
//vanilla javascript(dataset으로 접근)
document.getElementById('select_quatro_list').options[document.getElementById('select_quatro_list').selectedIndex].dataset.sub_type

//jquery(data로 접근)
$('#select_quatro_list option:selected').data('sub_type')

 

select에 option 추가/제거

//option 붙이기
$('#select_list').append('<option value="엥">엥</option>')

//option 떼기
$('#select_list').find('option[value=vvv]').remove();

 

select 에서 선택된 options들 가져와서 반복문 돌리기

$('#select_list option:selected').each(function(index,obj){
	var value = obj.value;
	var cont_type = obj.dataset.cont_type;
	var text = obj.text
})

 

반응형
반응형

input type이 number인경우 maxlength 속성이 안 먹습니다.

함수를 걸어줘야 합니다.

<input type="number" maxlength="4" oninput="maxLengthCheck(this)"/>

해당 dom의 maxlength속성을 사용하므로 maxlength 속성은 지우면 안 댐.

<script type="text/javascript">
	
function maxLengthCheck(object){
  if (object.value.length > object.maxLength){
   object.value = object.value.slice(0, object.maxLength);
  }    
}
  
</script>
반응형
반응형

html 

<input type="radio" name="doughnut" id="doughnut" value="doughnut">
<label for="doughnut">도넛</label><br>

 

javascript

[이름이 doughnut인 label 선택해서 text 변경하기]

$("label[for = 'doughnut' ]").text("맛있어");

 

반응형
반응형

[name이 같은 여러개의 dom 요소]

<input class="setNum" type="number" value="0" name="myItem" >
<input class="setNum" type="number" value="0" name="myItem" >
<input class="setNum" type="number" value="0" name="myItem" >
<input class="setNum" type="number" value="0" name="myItem" >

 

[ name으로 dom 찾기 ]

//4개의 dom요소가 선택된 상태
document.getElementsByName('myItem');

 

[ name으로 찾은 dom의 개수 ]

document.getElementsByName('myItem').length;

 

[ i번째 item 선택하기 ]

document.getElementsByName('myItem').item(i);


//변수에 넣어서 사용할 때
var myItem=document.getElementsByName('myItem'); 
myItem[i];

 

[ i번째 item value 설정 ]

document.getElementsByName('myItem').item(i).value=0

 

 

반응형
반응형

유튭 영상 우클릭 > 소스코드 복사하여 iframe을 따온다.
소스에 붙여넣기 하면 됨.

 

PC 웹에 추가 

* 자동재생을 하려면 링크 끝에 아래 텍스트 추가
?autoplay=1&mute=1

<iframe width="1000" height="562.5" src="https://youtu.be/aBcDEFGh3IJ?autoplay=1&mute=1" title="영상제목" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>

 

모바일버전 웹에 추가 


* 모바일에서 자동재생을 하려면 IFame Player API를 사용하면 됨.
참고)https://developers.google.com/youtube/iframe_api_reference

//youtube 영상을 표시할 div
<div id="player1" style="width:100%">

//youtube 스크립트 파일 url 추가
<script src="https://www.youtube.com/iframe_api"></script>

//자동재생 함수 추가
<script>
var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('player1', {
		videoId: 'aBcDEFGh3IJ', //유튭 영상ID
		playerVars: {   
				'autoplay': 1, //자동재생
				'rel': 0,
				'showinfo': 0,
				'modestbranding': 1,
				'playsinline': 1,
				'rel': 0,
				'controls': 1,	//youtube 콘트롤 표시
				'color':'white',
				'loop': 1, //반복 여부  
		},
		events: {
		'onReady': onPlayerReady,
		}
	});
}

function onPlayerReady(event) {
	player.playVideo();
	player.mute(); //자동재생하려면 mute해야함
}

</script>
반응형
반응형

기간 검색 날짜 시작일이 20220101, 종료일이 20220301인경우

검색하려는 기간이 유효 범위 안에 있는지 검사하는 함수.

예를 들어 시작일로부터 한달까지만 검색할 수 있는 경우.

$('#startdate').val()		//20220101 
$('#enddate').val()		//20220301


//시작일로부터 days 일 뒤 까지는 검색이 유효함.
function dateValiChk(days){	
	//new Date(2022,0,1)를 사용하여 날짜 세팅.
	var sdate = new Date($('#startdate').val().substring(0,4),$('#startdate').val().substring(4,6)-1,$('#startdate').val().substring(6,8));
		
	//new Date(2022,2,1)를 사용하여 날짜 세팅.
	var edate = new Date($('#srchedate').val().substring(0,4),$('#enddate').val().substring(4,6)-1,$('#enddate').val().substring(6,8));
		
	//출력 결과 Sat Jan 01 2022 00:00:00 GMT+0900    
	console.log('sdate : ' + sdate);
	//출력 결과 Tue Mar 01 2022 00:00:00 GMT+0900
	console.log('edate : ' + edate); 
		
        
	//검사 기준 date 만들기
	var validDate = sdate;
	//시작날짜에서 유효한 days를 더해줌 ex)31일
	validDate.setDate(validDate.getDate()+days);
        
	//출력 결과 Tue Feb 01 2022 00:00:00 GMT+0900
	console.log('validDate : ' + validDate);  
        
	if(validDate < edate ){ //끝날짜가 검사기준 날짜보다 큰 경우
		return '검색 기간은 최대 1개월입니다.';		
	}else{
		return 'success';
	}
}


dateValiChk(31); //결과 fail

 

javascript date 기본 

var myDate1 = new Date(); // 현재 date 구하기
var myDate2 = new Date(2022,2,3); // 2022년 3월 3일 날짜세팅
var myDate3 = new Date('2022-03-03'); // 2022년 3월 3일 날짜세팅

var myDate4 = myDate3.getDate(); //날짜 get
myDate4.setDate();
반응형
반응형

vanilla js로 radio 타입 체크 여부 control

<input type="radio" name="pick" value="1">
<input type="radio" name="pick" value="2">
<input type="radio" name="pick" value="3">
document.getElementsByName('pick').item(3).checked=true
반응형
반응형

특정 페이지의 html 소스를 텍스트로 가져오려고 함.


const request = new XMLHttpRequest();
const url = 'https://localhost:8080/test'; // 소스 가져올 페이지 

request.open('GET', url, true);
request.onload = function () {
var htmlText = request.responseText;
}

console.log(htmlText);

 

반응형
반응형

sidebar 요소의 position은 fixed

.sidebar{
    position : fixed;
}

 

스크롤 위치에 맞춰 해당 요소의 margin-top이나 margin-left 속성을 실시간으로 변경해주어 이동하는 것처럼 보이게 하는 원리임.

//가로스크롤 시에는 고정하고 세로스크롤시에는 움직이는 경우
$(function() {
  var marginTop = parseInt( $(".sidebar").css('margin-top') );
  $(window).scroll(function(e) {
    $(".sidebar").css("margin-top", marginTop - $(this).scrollTop() );
  });
});

//세로스크롤 시에는 고정하고 기로스크롤시에는 움직이는 경우
$(function() {
  var marginLeft = parseInt( $(".sidebar").css('margin-left') );
  $(window).scroll(function(e) {
    $(".sidebar").css("margin-left", marginLeft - $(this).scrollLeft() );
  });
});
.scrollLeft() 선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 위치를 얻거나, 
선택된 요소의 수평 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다.
.scrollTop() 선택한 요소 집합의 첫 번째 요소의 수직 스크롤 바의 위치를 얻거나, 
선택된 요소의 수직 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다.

 

 


참고

스크롤바 위치 관련 내용

 

jQuery 입문 | 요소의 영역 | 요소의 스크롤 위치 .scrollLeft() .scrollTop()

요소의 스크롤 위치 jQuery는 선택한 요소의 스크롤 위치를 손쉽게 반환하고 설정 할 수 있는 메소드를 제공한다. 메소드 설명 .scrollLeft() 선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 위

www.devkuma.com

세로 고정 가로 스크롤 내용

 

 

CSS 세로 고정 가로 스크롤 - 제타위키

다음 문자열 포함...

zetawiki.com

 

반응형
반응형

내가 순서대로 동기처리하고 싶었던 코드

ajax1
code1
code2
ajax2
code3

위의 로직이 이처럼 순차적으로 처리되길 바랐음...

promise를 사용하여 아래와 같이 짜보았다.

//promise 생성 시 resolve, reject 콜백함수를 인자로 넘김.
//작업 성공 시 resolve를, 실패 시 reject를 호출하면 됨.
let func1 = new Promise((resolve,reject)=>{ 
	ajax1
	ajax1 성공 시 resolve(); 호출하고 code1
});

//promise 결과를 사용하기.
//promise.then은 콜백이 resolve()인 경우에,
//promise.catch는 reject()인 경우에 실행하게된다.
func1.then({
	code2
	ajax2
	ajax2 성공 시 code3
}).catch({})

 

아래는 사용한 코드 예시임.

let func1 = new Promise((resolve,reject)=>{ //new Promise() 메서드로 생성되면 대기(pending) 상태                           
	$.ajax({
		url: "/api/test/get1",
		type: "get",
		async : false, //동기처리방식. 응답 완료 후 다음 로직 실행
		data: $('#data').val(),
		success: function (param) {
			let data = param.data;
			console.log("code1");
			resolve(data); //성공 시 resolve 콜백으로 리턴 값을 보내면 이행(fulfilled)상태
		},
		error : function(){                      
			reject(); //이행실패시 reject 콜백.
		}
	});
});

func1.then(function(data){ //promise.then : promise의 resolve 를 받는다.
	console.log("code2");
	$.ajax({
		url: "/api/test/get2",
		type: "get",
		async : false,
		success: function (param) {
        	console.log("code3");
 		}
	});
}).catch({console.log("실패"!)}); //catch : promise의 reject 를 받는다.
반응형

+ Recent posts