2012年12月12日 星期三

jQuery 動態修改 html select 物件 (update 2012/12/13 )




在工作的時候碰到的一個小問題,根據規格以為要用TextArea 來做出效果,後來發現用Select就行。

一開始還在思考要怎麼讓select 不要變成下拉選單,之後誤打誤撞發現只要使用size就可以達到這個要求,不會有下拉按鈕出現...看來我對HTML TAG不夠熟。

接著問題就是要用按鈕把左邊的textField 的值放入Select元件,再用按鈕把select 元件中的值刪除。


因為有jQuery所以程式碼變得簡單許多,在<select></select>中插入<option></option>就行。


插入的方式用append

$("select物件").append('<option>'+ 內存值 +'</option>');


至於刪除就比較麻煩,要先取得選取的索引數值再根據數值去select裡面刪掉元素。

作法分別是
1.先用 selectedIndex 取出選取的位置...至於為啥要有那個get(0) 我還真不曉得...

經過Google大神的指引才發現原來selectedIndex是HTML裡面的一種Attribute,既然這樣就簡單了,直接使用attr就可以取出值跟設定值了XD!

var 選取的位置 = $("select物件").get(0).selectedIndex

var 選取的位置 = $('[name=selectNumber]').attr('selectedIndex')


2.接著就是用remove()這個jQuery方法根據位置去刪除物件

$('select物件 option:eq('+ 選取的位置 + ')').remove();


這是動態網頁常常用到的手法,直接使用JavaScript 或是 jQuery 去插入tag達到修改網頁內容的效果,能夠憑空變出一個網頁內容而不是去隱藏/展現網頁內容。一般使用JavaScript 或是 jQuery常常都是取值或是改值,比較少人會直接寫入tag。在我製作網頁的時候我覺得這種方式能讓網頁內容更加來的有變化,另外這方式好像也被歸類在AJAX裡面?

0 意見:

張貼留言