[활용팁] 자바스크립트 선택(Select)박스 다루기(값변경, 확인, 서브속성)

오늘은 선택박스 값을 설정하고 값을 읽는 방법에 대하여 알아 보겠습니다.

다을 배열 데이터를 선택(Select)박스에 설정하고 값을 읽어 오려면 어떻게 해야 할까?

var basicData = new Array(
      ['http://naver.com','네이버','1'],
      ['http://daum.net','다음','2'],
      ['http://nate.com','네이트','3'],
      ['http://yahoo.com','야후','4']
                         );

배열 변수에 값이 있으니 배열 인덱스 값으로 설정해서 값을 읽어와도 되겠지만....

오늘은 선택박스에서 모든 값을 설정하고 값을 읽어오는 방법에 대하여 알아보려 한다.

<option value='1|네이버|http://naver.com'>네이버</option> 

이렇게 설정을 할수도 있겠지만... 이것도 아니다 ㅋ

<option value='1' korname='네이버' url='http://naver.com'>네이버</option> 

이렇게 서브 속성을 가지고 처리 하려 한다...

그럼 제이쿼리를 이용하여 데이터를 넣고 읽어오는 방법을 알아보자.

<script>
function loadSelect() {
	var htm = "";

	for (var x=0;x < basicData.length; x++)	
	{
		htm += "<option value='" + basicData[x][2] + "' korname='" + basicData[x][1] + "' url='" + basicData[x][0] + "'>" + basicData[x][1] + "</option>";
	}
	$("#selsite").html(htm);
}
</script>

<select name="selsite" id="selsite" onchange="dispView();">
</select>
<input type="button" value="선택박스 설정" onclick="loadSelect()">

배열값을 읽어서 html 태그를 선택박스에 넣어주면 끝.

 

저 선택박스의 선택된 값을 읽어보자..

이렇게 속성값을 읽어서 활용할수 있다.

 

 

 

예제 소스 다운로드

 

https://blog.naver.com/spprince/222383745696

 

#활용팁 #javascript #자바스크립트 #jQuery #선택박스 #Select #서브속성

 

---

 

본 블로그의 글은 공공정보와 개인적 생각의 글 임을 알려드립니다.

또한 오류가 있는 부분이 있으면 댓글로 알려주시기 바랍니다.

 

감사합니다.