Event系列教學:選擇或輸入值雙用

大概說明一下,Web設計時,尤其是互動類的,全部都牽涉到event,然後event互相影響就可以做到很多的事情,請先看demo code

<!DOCTYPE html><html><head></head><body>
    <div id="lang_input">請選擇或輸入喜歡的程式開發語言:
      <input data-name="lang" type="text" placeholder="請輸入類似'Ruby'" style="display:none;"/>
      <select data-name="lang" name="lang">
         <option value="">選擇語言</option>
         <option value="%">自訂輸入</option>
         <option>Ruby</option><option>Go</option><option>Java</option><option>C++</option>
      </select>
    </div>
    <script src="./jquery.js"></script><script>jQuery(function($){
  $('#lang_input').find('select').change(function(){
    if($(this).val() == '%'){
      $(this).removeAttr('name').hide().siblings('input').attr('name' , $(this).attr('data-name')).show();
    }
  }).siblings('input').keyup(function(){
    if($(this).val().length == 0){
      //select first (reset)
      var select = $(this).removeAttr('name').hide().siblings('select');
      select.val(select.find("option:first").val());
      select.attr('name' , $(this).attr('data-name')).show();
    }
  })
});</script></body></html>

比較不重要的code都縮減成一行減少顯示量,縮減處不解釋

首先,<form>這個 element (這邊沒有),只會送出有 name 這個 attribute 的 dom 的 value,所以某個 input 讓其值不要送出很簡單,就把 name 這個 attr 拿掉即可(IE8- 有的時候不讓你改,所以…可能需要砍掉重練該 dom…)

再來就是event,請記得這類東西設計的時候,HTML內的東西不管怎樣都是"預設值",所以上面預設的是使用下拉選單,再來就是一些操作了,類似

  1. select 選到的 value 為 % 時,隱藏自己,移除自己的name,顯示input,input的name還原回來
  2. input 輸入刪除到沒有字元時,隱藏自己,移除自己的name,顯示select,select的name還原回來,並把select所選的項目設為第一個

打完收工,其實也就這樣而已,一切都是event,也就是上面的『select 選到的 value 為 % 時』,與『input 輸入刪除到沒有字元時』

這動作完成後,該做些什麼事情,類似上面的『隱藏自己,移除自己的name,顯示input,input的name還原回來 … 』

so~ 簡單的應用給你們參考,以上 :slight_smile:

1個讚

這個方法是不錯
但如果網頁有多樣多個下拉的選單
只能第一個可修改,沒辦法多個
要怎麼改呢??

ccc~ 你真的有嘗試玩過它嗎? 上面的 demo 就是"一個"的狀況,& 知道這基本技巧後你可以另外弄成 function 來輸入 dom 來替換掉 $('#lang_input') ,之後全用或指定幾個都隨便你哩