2009年04月2日

jQuery下拉選單可以多重選擇

因為jQuery的中文書很少,而且都寫給有程式經驗的人看,不適合初學者,我只好忍痛到官網去查API,查到後留下備忘用的:
在jQuery找了好久的plug-in,看英文看到眼睛快脫窗,終於找到想要的特效,後來發現其實也沒那麼難,只要不計較外觀css,建議可以自己練習寫。
展示了一個比較不複雜的,把user選擇的值,放到hidden裡,方便submit時送到下一頁!
展示:官網

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){

   function notice(){
      // 取得下接選單的選取值
      var getValue = $('#multi').val() || [];
      //修改取得數值之後的串接符號
      getValue2 = getValue.join(", ");
      //動態即時更新hidden值
      $("#selector").val(getValue2);
   }
   //每當下拉選單被選取時,就呼叫一次ontice function
   $("select").change(notice);
   notice();

});
// 送出時pop確認
function display(){
   alert($("#selector").val());
}
</script>
<select multiple="multiple" id="multi" name="multi" title="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="button" name="buttom" value="submit" onClick="display();">


Posted by aj2007 at 樂多Roodo! │22:52 │回應(1)引用(0)jQuery
樂多分類:日記/一般 工具:編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/8626619
回應文章

jQery讚的啦~
元元也很愛用
Posted by Dabinn at 2009年04月3日 00:13