[제이쿼리]- ★change 이벤트 / 쇼핑몰 사이트에서 선택한 물건에 따라 값을 다르게 표현해줄 때 사용하는 이벤트

change 이벤트 

 

선택한 폼 요소의 값(value)를 새 값으로 바꾼다. 

그리고 포커스가 다른 요소로 이동할 때 이벤트가 발생한다. 

[기본형]

-단독
$('대상요소').change(function(){ 코드 })


-그룹
$('대상요소').on('change', function(){ 코드 })


-강제
$('대상요소').change();

---

선택한 옵션에 대한 벨류 값을 가져오기

<h2>change()</h2>

    <select name="rel_site" id="rel_site">

      <option value="">사이트 선택</option>

      <option value="www.google.com">구글</option>

      <option value="www.naver.com">네이버</option>

      <option value="www.daum.net">다음</option>

    </select>

    <p class="txt2"></p>

//체인지 이벤트

        $("#rel_site").on("change", function () {

          $(".txt2").text($(this).val());

        });

---

input태그에 입력한 값이 p태그에 출력되도록 하기 

 <div>

      <input

        type="text"

        id="search_word"

        name="search_word"

        value="텍스트를 입력해주세요"

      />

    </div>

    <p class="txt3"></p>

 //

        $("#search_word").on("change", function () {

          $(".txt3").text($(this).val());

        });