본문 바로가기

jQuery로 select 된 값 가지고 오기 jQuery를 사용해서 select에서 선택된 값을 가지고 오는 방법은 아래와 같습니다. $('.target-selection').click(function(){ var option_value = $(".target-selection option:selected").val(); var option_text = $(".target-selection option:selected").text(); console.log(option_value ); console.log(option_text ); }); target-selection 이라는 클래스를 가진 select 에서 선택이 이루어지면 option:selected를 활용해서 value값은 val() 로 가지고 오고요. text 값은 text()로 가지고 옵니.. 더보기
javascript - select - focus and change 아래와 같이 생긴 select가 있다고 가정하고요. ... 이 select가 focus, change 될 때 일어나는 이벤트는 아래와 같은 코드로 처리할 수 있습니다. $('.aaa-select').on('focus', function () { console.log('focus event'); }).change(function() { console.log('change event'); }); 이런식의 시나리오를 처리할 수 있을 것 같아요. focus 되면 현재 선택되어 있는 값을 저장합니다. change가 일어나면 어떤 프로세스를 처리하는데 변경에 정상적으로 이루어지면 상관없지만 어떤 이유에서 변경이 이뤄지지 않아야 하면 focus에서 저장된 값을 사용해서 원래대로 돌려버리는 것이죠. 그리고 에러 메세지.. 더보기
Bootstrap3 Typeahead : First Item Select 트위터에서 만들어준 Typeahead.js가 있고,이걸 bootstrap3 기반으로 활용할 수 있도록 만든 Bootstrap3 Typeahead가 있습니다. 이 포스팅에서는 후자에 대한 이야기고요. 일단 URL부터 정리하면 다음과 같습니다. 1. typeahead.js : https://github.com/twitter/typeahead.js2. Bootstrap3 Typeahead : https://github.com/bassjobsen/Bootstrap-3-Typeahead typeahead은 autocomplete 기능을 제공하기 때문에 사용하고 있슴다. 검색이된 item 중에 첫 번째 요소를 무조건 선택한 상태로 만들고 싶었고, 그것은 아래와 같은 코드고 가능했습니다. $(target_id).ty.. 더보기
Bootstrap3 Typeahead 결론부터 말하면 이번 포스팅은 아래 주소에서 제공되고 있는 라이브러리에 대한 이야기 !! url: https://github.com/bassjobsen/Bootstrap-3-Typeahead 저는 2시간 전까지 typeahead 만을 활용해왔는데 이게 기본 설정이 첫 번째 요소를 선택하는 형태는 아닙니다.해결할 수 있는 방법이 꽤 많이 있긴 하던데, 내가 잘못한 것이겠지만 적용이 안되서 문제가 있었어요. 그래서 찾아본 결과 Bootstrap에 적합하게 변경한 듯한 Typeahead를 찾았고 적용했고, 기본적으로 첫 번째 요소를 선택하는 것이 가능해졌습니다. 그래서 간단하게라도 정리!! 1. 일단 생성하는 방법부터 기본 Typeahead와는 차이가 있어요. 아래는 예시입니다. Bootstrap3 Typea.. 더보기
jQuery Selectric - 간단 소개, JavaScript, jQuery, Select 요즘 자바스크립트 기반의 라이브러리를 검색 및 활용해야 하는 일이 많네요. jQuery Selectric은 간단하고 편리한 Select를 제공하는 라이브러리입니다. 기본정보는 다음과 같습니다. 홈페이지 주소 : http://lcdsantos.github.io/jQuery-Selectric/index.html 깃허브 주소 : https://github.com/lcdsantos/jQuery-Selectric 데모 : http://lcdsantos.github.io/jQuery-Selectric/demo.html 라이선스 : MIT 일단 라이선스는 MIT 이니깐요. 상용버전에서 사용하셔도 되고, 관련해서 소스코드 공개할 의무는 없습니다. 다만 MIT 라이선스여도, 사용했다면 웹 페이지 어딘가에 해당 라이브러리.. 더보기
jQuery UI - Select change example jQuery UI에서 select에 대해 이벤트를 설정하는 것은 일반적인 onchange를 통해 JavaScript 함수를 호출하는 것과 약간 차이가 있습니다. 일단 예제를 보시죠. .... .... T1 T2 T3 select는 일반적인 방식과 동일하게 설정해줍니다. jQuery UI를 적용하면서 select에 change 속성 값으로 함수를 입력함으로써 select의 변경이 있는 경우에 alert를 통해 몇 번째 option이 선택되었는지 출력하도록 했습니다. 위와 같은 형식은 jQuery UI 홈페이지에 http://api.jqueryui.com/category/widgets/ 에 더 자세히 나와있습니다. 더보기