jQuery <select><option value="1|TOUR"> value값에 2개 이상의 추가하기 ( 구분자 사용 )

가끔 우리는 <select>문에 <option value=""> value값을 2개 이상의 값을 사용하고 싶을때가 있다.

 

[그림 1. BEACH를 셀렉트하면, 10, BEACH가 입력을 원할때]

 

substring()과 indexof()를 구분자의 값 split 해서 넣기 

jQuery를 이용한 구분자를 두고 양쪽 input값에 정보 넣기

<select  name="cats" id="cats" onchange= "$('#cat_no').val($('#cats').val().substring(0,$('#cats').val().indexOf('|'))); $('#cat_name').val($('#cats').val().substring($('#cats').val().indexOf('|')+1));" style="width: 100px; display:inline-block"> <option value="">:: All Location Group::</option> <option value="1|SCHOOL">SCHOOL</option> <option value="2|STORE">STORE</option> <option value="10|BEACH">BEACH</option> <option value="11|TOUR">TOUR</option> </select>

 

(사용 형태 설명)

<input id="cat_no">와 <input id="cat_name">의 value 값에 "10|BEACH"값을 이용해서 ("|"로 구분된 값을 넣기)

10과 BEACH를 따로 추가 하고 싶을때 사용할때 위의 방법을 사용하면 된다.

 

[ cat_no 가져오기 ]

문자의 처음부터 "| "가 나오는 문장까지 substring문장으로 자른다.
"|"가 발견되는 문장값을 indexof(문자)를  통해서, 해당 위치 번호를 가져온다.

$('#cats').val().substring(0, $('#cats').val().indexOf('|') ) //substring(시작,끝) 

 

 

 

[ cat_name 가져오기 ]

 처음 "|" 나오는에 다음 문자(Char)부터 끝까지 자른다.

$('#cats').val().substring($('#cats').val().indexOf('|')+1) //substring(시작) 이후끝까지

 

간단한 프로그램이지만, 유용한 로직이다.

 

 

참고:

substring: https://www.w3schools.com/jsref/jsref_substring.asp

indexof:  https://www.w3schools.com/jsref/jsref_indexof.asp