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

測試環境
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

這個功能在一般網站上不算太常見，但是如果是在公司上班又是在寫程式的就會常看到了
因為User常會說「可不可以選完這個，然後自動勾選那個」..等
所以還是要來介紹一下今天這邊的寫法其實跟
「【JQuery操作Select標籤系列介紹】【應用篇】JQuery Select標籤連動checkbox元件」
這篇文章是大同小異，今天呢一樣稍微拿個範例來介紹，讓大家比較容易了解
這邊是拿早餐店點餐的套餐選取來做參考
早餐店可能每天都會提供不一樣的套餐方案，而每個套餐搭配的項目又不同

讓我們先來看看今天要用到的HTML Code吧

<p>
日期:
<select id="sel">
  <option value="0">請選擇</option>
  <option value="6">星期六</option>
  <option value="7">星期日</option>
</select>
(每日提供不同餐點)
</p>
<p>
套餐別
<select id="sel2">
  <option value="Null">請選擇</option>
  <option value="A">套餐A</option>
  <option value="B">套餐B</option>
  <option value="C">套餐C</option>
  <option value="D">套餐D</option>
</select>(選擇套餐可享優惠)
</p>
<div id="menu">
  <table>
    <tr>
      <td>主餐餐點</td>
      <td>飲料</td>
    </tr>
    <tr>
      <td id="meals"></td>
      <td id="drink"></td>
    </tr>
  </table>
</div>

我們可以看到今天這個範例是由兩個Select Tag還有一個Menu的Table組成
咦!?為什麼沒有看到radio選項呢?
因為我們的radio選項是透過JQuery動態產生的
至於產生的方法後面介紹Jquery Code的時候會說到，這邊就不說明了
先讓我們用意點點CSS來將Menu區塊稍微排版一下

table{
  margin:20px 0 0 0;
  border-collapse:collapse;
  width:200px;
}
table td{
  border:1px solid #000;
  padding:5px;
  text-align:center;
}
#meals, #drink{  
  text-align:left;
}

接著我們就開始進入最主要的JQuery部份了，程式說明請看下面註解

//在日期Select Tag值變更時執行事件
$("#sel").change(function(){
  //將#sel的值帶入Switch作為判斷條件
  switch (parseInt($(this).val())){
  //當Switch值為0時執行
  case 0: 
      //呼叫清除Menu的function
      removeMenu();
      break;
  //當Switch值為6時執行(代表星期六)
  case 6:  
      //呼叫清除Menu的function
      removeMenu();
      //在Table中ID為meals的TD區塊增加兩個radio選項
      $("#meals").append(
        "<input type='radio' class='vehicle' id='mea1' name='mea' value='0'>蘿蔔糕" + 
        "<input type='radio' class='vehicle' id='mea2' name='mea' value='1'>漢堡"
      );
      //在Table中ID為drink的TD區塊增加兩個radio選項
      $("#drink").append(
        "<input type='radio' class='vehicle' id='dri1' name='dri' value='10'>奶茶" + 
        "<input type='radio' class='vehicle' id='dri2' name='dri' value='11'>紅茶"
      );
      break;
  //當Switch值為7時執行(代表星期日)
  case 7:  
      //呼叫清除Menu的function
      removeMenu();
      //在Table中ID為meals的TD區塊增加兩個radio選項
      $("#meals").append(
        "<input type='radio' class='vehicle' id='mea21' name='mea2' value='0'>炒麵" + 
        "<input type='radio' class='vehicle' id='mea22' name='mea2' value='1'>三明治"
      );
      //在Table中ID為drink的TD區塊增加兩個radio選項
      $("#drink").append(
        "<input type='radio' class='vehicle' id='dri21' name='dri2' value='10'>咖啡" + 
        "<input type='radio' class='vehicle' id='dri22' name='dri2' value='11'>綠茶"
      );
      break;
 }    
});
function removeMenu(){
  //刪除類別名稱為vehicle的radio選項
  $(".vehicle").remove();
  //清除#meals與#drink中的text文字
  $("#meals, #drink").text("");
}
//在套餐別Select Tag值變更時執行事件
$("#sel2").change(function(){
  switch($(this).val()){
    case "Null":
      //清除radio選項的Checked值
      removeMenuRadio();
      break;
    case "A":
      //呼叫selectRadio的function並賦予A套餐的值
      selectRadio(parseInt($("#sel").val()), 0, 0)
      break;
    case "B":
      //呼叫selectRadio的function並賦予B套餐的值
      selectRadio(parseInt($("#sel").val()), 0, 1)
      break;
    case "C":
      //呼叫selectRadio的function並賦予C套餐的值
      selectRadio(parseInt($("#sel").val()), 1, 0)
      break;
    case "D":
      //呼叫selectRadio的function並賦予D套餐的值
      selectRadio(parseInt($("#sel").val()), 1, 1)
      break;
  }
});
//清除radio選項的Checkde值
function removeMenuRadio(){
  //遍歷#meals與#drink下Type為radio的input元件
  $("#meals input[type='radio'], #drink input[type='radio']").each(function(i,ele){
    //取出符合條件的元件並設定給變數_text，再將元件賦予ID並指定給變數_id
    var _text = $(ele),
        _id = "#" + _text.attr("id") || "";
    //刪除radio的Checked屬性(就是設置為未選取的狀態)
    $(_id).removeAttr("checked");
  });
}
//設定套餐的radio選項
function selectRadio(selval, a, b){
  switch(selval){
  case 6:  
      //設定主餐餐點
      $('input[name="mea"]')[a].checked = true;
      //設定飲料
      $('input[name="dri"]')[b].checked = true;
      break;
  case 7:  
      $('input[name="mea2"]')[a].checked = true;
      $('input[name="dri2"]')[b].checked = true;
      break;
 }    
}

這邊要注意一下再SelectRadio的部分因為是用陣列的方式
去推算要設定為true的radio選項所以才會需要抓Name
因為ID本身是不可重複的(重複的話套用CSS跟JQuery都可能會有不明BUG)

最後讓我們來看看實際Dome會長怎樣吧!

Dome

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