【JQuery操作Select標籤系列介紹】【應用篇】JQuery Select標籤連動text與area元件

測試環境
JQuery版本	jquery-1.11.1.min.js(jquery-2.1.1.min.js也可使用), jquery-ui-1.10.4.custom.min.js
測試瀏覽器	Chrome36.0,Firefox31.0

在平常我們寫程式的時候常常會有遇到需要做一些連動的行為
今天就是要來介紹一下JQuery+HTML的基礎連動方式啦~
事不宜遲馬上就讓我們開始進入今天的主題吧

首先我們要先建立一個Select的下拉選單
還有一個text的input以及textarea Tag
今天我們用各縣市區碼的案例來做說明

請選擇所在縣市 :
<select id="sel">
  <option value="00">請選擇</option>
  <option value="03">桃園</option>
  <option value="02">台北</option>
</select>
您所在縣市的區域號碼(TEXT) : 
<input id="val">
您所在縣市的區域號碼(TEXTAREA) : 
<textarea id="area"></textarea>

緊接著就是要來撰寫JQuery的部分了

$("#sel").change(function(){
  //將選取的Option值寫入text input
  $("#val").val($("#sel").find(":selected").val());  
  //將選取的Option值寫入textarea Tag
  $("#area").val($("#sel").find(":selected").val());  
});

最後讓我們來看看實際效果
Dome

See the Pen 【JQuery操作Select標籤系列介紹】【應用篇】JQuery Select標籤連動text與area元件 by jen (@jen_huang) on CodePen.