티스토리 뷰

IT tech Coding/jquery

jQuery와 html select 선택리스트를 연결해서 사용하기, 선택리스트를 선택할때 이벤트를 실행하기

Coding Life 2019. 7. 6. 14:00
반응형

안녕하세요. Web 프로그래밍을 공부하면서 함께 공유하면 좋을 정보를 올려봅니다.

html의 select문장을 이용해서 pie,cake,candy를 선택하면...

선택리스트 표기

위의 창에서 선택하면 아래 메시지를 나타내는 것...

이걸 응용하면 여러 동작들을 만들어 낼 수 있겠지요...

단순 텍스트 출력만 하는 것이 아닐거란 짐작은 될 것입니다.

 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
  $(".food").hide();
    $("#category").change(function(){
        $(".food").hide();
        $("#div" + $(this).val()).show();
    });
 });
</script>
</head>



<select id="category">
<option value="" disabled="disabled" selected="selected">Please select a    category</option>
<option name="choice1" value="pie">   Pie  </option>
<option name="choice2" value="cake">  Cake </option>
<option name="choice2" value="candy"> Candy </option>
</select>
<div id="divpie" class="food">
<p> this is pie </p>
</div>
<div id="divcake" class="food">
<p> this is cake </p>
</div>
<div id="divcandy" class="food">
<p> this is candy </p>
</div>

 

위의 코드로 작성하셔서 응용하면 select로 선택된 것들에 대해서 여러가지 이벤트 처리가 가능합니다.
좋은 프로그램 완성하기시길 기원합니다.

 

반응형
저작자표시

'IT tech Coding > jquery' 카테고리의 다른 글

radio버튼을 클릭시 동작하는 웹 jQuery로 구현하기  (0) 2019.08.11
php와 제이쿼리 그리고 변수값 전달에 대한 방법론  (0) 2019.07.09
jQuery 래퍼(wrapper)는 무엇인가?  (0) 2019.06.29
jQuery 크로스 브라우저 이슈에 대해여....  (0) 2019.06.29
jquery 첫발, 제이쿼리가 도대체 뭘까?  (0) 2019.06.29
댓글