0. 前言、
最近處理一個專案碰到的例子很有趣,提出來與大家分享一下下。畫面中,經過一串的運作產生一群動態產生的下拉選單。這一群群的選單中,數量不同,選中的值也不同。問題,我們要如何才能快速取出同一群組中被選中的值呢?
起初,我也被這問題困擾了一下。後來想到曾經看過黑大、小喵大二位大哥學長的文。欸~靈光一閃,隨即動手 try 了。
1. 實作、
我們知道,.find(':selected').text(); 可以取得下拉選單中所選中的文字。而 .find(':selected').val(); 則可以取得所選中的值。
接著,要怎麼挑出一批我想要的群組文字呢?此時,自訂屬性的方便就突顯出來了。利用 $('select[myattr="val"]'),這意思是取得帶有 myattr="val" 屬性/值的 select tag。要注意的是,在群組選取時,所有選中的值會依序不斷累積成一大串字串。如果我們可以分割出那一大串字字,就可以得到各別的選中值來加以運用了。
我自己是異想天開地在 text 下手,直接在該值上加個「空白 字串」來欺騙眼睛,又可以達到分割的效果。
若想以 .find(':selected').val(); 取值,很抱歉,這方法只會傳第一個下拉選單的選中值而已。
以 group a 為例,$('select[tgroup="a"]').find(':selected').text(); 式中得到的長字串為 3221。
以 group c 為例,$('select[tgroup="c"]').find(':selected').text(); 得到的長字串為 33空白44空白,長度 = 6。
求 group b 選中值的和,
var total = 0;
var Tb = $('select[tgroup="b"]').find(':selected').text();
Tb = Tb.substr(0, Tb.length - 1); //去掉最後一個分隔符號「.」
for (i = 0; i < Tb.length - 1; i++){
total += parseInt(Tb.split('.')[i]); //把長字串以「.」分割
}
//total = 9
以上。這個小技巧,希望大家不棄嫌:p
範例檔
ref:
jQuery :selected Selector
TIPS-用jQuery操作select
透過自訂屬性,Table中focus使用方向鍵上下移動
1 留言
condos in hyde park