컴퓨터이야기/JQuery 인풋박스의 값을 셀렉트 박스로 by 변화지시자 2011. 3. 29. 반응형 <html> <head> <title> multi select box control </title> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#add").click(function() { var ip = ""; for(var i=1; i<=3; i++) { ip += $("#ip"+i).val() ip += "." } //참조 : http://www.tutcity.com/view/add-a-new-option-to-a-select-with-jquery.25595.html var tempIP = ""; var ip4 = $("#ip4").val(); var ip5 = $("#ip5").val(); for(var i=ip4; i<= ip5; i++) { tempIP = ip + i; /* alert(tempIP); $("#multi").append(new Option(tempIP, tempIP));*/ //중복 제거 $.each($("#multi").attr("options"), function() { if(tempIP == $(this).val()) { $(this).remove(); } //alert($(this).val()); }); //add var options = $("#multi").attr("options"); options[options.length] = new Option(tempIP, tempIP); } }); //참조 : http://alexyz78.blogspot.com/2009/05/addremove-options-from-select-list-with.html $("#remove").click(function() { $("#multi option:selected").each(function() { $(this).remove(); }); }); }); </script> </head> <body> <form name="f"> <input type="text" name="ip1" id="ip1" size="3">- <input type="text" name="ip2" id="ip2" size="3">- <input type="text" name="ip3" id="ip3" size="3">- <input type="text" name="ip4" id="ip4" size="3">~ <input type="text" name="ip5" id="ip5" size="3"><br><br> <select name="multi" id="multi" multiple style="width:100px; height:100px;"> </select> <input type="button" id="add" value="add"> <input type="button" id="remove" value="remove"> </form> </body> </html> 인풋박스값을셀렉트박스로.html 출처 : www.jquery.com 소스 입니다 공유하기 게시글 관리 구독하기Change Agent(변화변혁 주도자) 저작자표시 관련글 셀렉트리스트박스 jquery 이용 Jquery 와 eval 함수를 이용한 2단 리스트 박스 아이템 추가제거 셀렉트, 체크박스, 라디오 박스의 체크, 체인지 속성이용
인풋박스값을셀렉트박스로.html
