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裡面?