[javascript] editable select

css

---

.test{ display : none; position:absolute; } .editing { }

---

• test     : select가 초기에 보이지 않도록 설정
• editing : select가 열려있는지 안 열려있는지 판단하기 위한 class

---

html

---

<input type='text' id='a1' autocomplete='off' onfocus='test1(this.id)'/> <br> <select id="a" class='test' onclick="changetest(this.id,this.options[this.selectedIndex].value,event)" > <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> <option value='6'>6</option> <option value='7'>7</option> <option value='8'>8</option> <option value='9'>9</option> <option value='10'>10</option> </select>

---

• text   : focus되면 test1 함수 실행
• select : option이 클릭되면 changetest 함수 실행 

---

javascript + jquery

---

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).on('click', function(e){ var target = $(e.target); var $input = $('.editing'); var class_by_class='';   if(document.getElementsByClassName('editing')[0]) { class_by_class = document.getElementsByClassName('editing')[0].id; } if(class_by_class !='' && e.target.nodeName!='INPUT'){ // 여기 remove(class_by_class); }   })   function test1(findbyid_text) { var findbyid = findbyid_text.replace('1','');   if(document.getElementsByClassName('editing')[0]) { remove(document.getElementsByClassName('editing')[0].id); document.getElementById(findbyid).size = 5; $('#'+findbyid).show(); $('#'+findbyid).addClass('editing'); var opts = $('#'+findbyid).find('option'); opts.each(function(i,v){ opts.eq(i).addClass('editing'); }) } else{ document.getElementById(findbyid).size = 5; $('#'+findbyid).show(); $('#'+findbyid).addClass('editing'); //$('#'+id+'1').addClass('editing');   var opts = $('#'+findbyid).find('option'); opts.each(function(i,v){ opts.eq(i).addClass('editing'); }); } } function remove(findbyid) { //$('#'+id+'1').addClass('editing'); document.getElementById(findbyid.concat('1')).blur(); var opts = $('#'+findbyid).find('option'); opts.each(function(i,v){ opts.eq(i).removeClass('editing'); }); $('#'+findbyid).removeClass('editing');   $('#'+findbyid).hide(); }   function changetest(findbyid_select,value,event) { var findbyid = findbyid_select.concat('1'); document.getElementById(findbyid).value = value; remove(findbyid_select); event.stopPropagation(); } </script>

---

$(document).on('click', function(e) ▶ select가 열려있고 클린한곳이 TEXT가 아니면 select를 닫는다

 

test1

▶ select가 열려 있을때    : 기존의 select를 닫고 새로운 select를 연다 

▶ select가 안열려 있을때 : 새로운 select를 연다.

 

remove

▶ 기존의 select를 닫아주는 메소드

 

changetest

▶ select의 option이 클릭할때 선택된값을 text의 값으로 변경한뒤 select를 닫는

▶ event.stopPropagation() => 현재 이벤트가 상위에서는 발생되지 않게 된다.

---

입력이 가능한 select 또는 선택이 가능한 text 를 만드는 방법입니다.

class를 하나 만들어주고 클래스를 add하고 remove를 해주면서 열고 닫는방식입니다.

더 좋은 방식이 있을수도 있으며 저는 IE9버전까지 지원을 해야하는 상황이라 이러한 방식으로 구현했습니다.

지금 jquery로 구현되어 있는 부분은 추후에 javascript로 변경할 예정입니다.

제가 구현해놓은것에서 최대한 간결하게 수정하여 올리는것이어서 오류가 있을수도 있습니다.

혹시 오류가 발견된다면 알려주시면 감사하겠습니다.