jQuery + 自訂屬性的妙用

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 留言

Blue_come寫道…
I really like your blog content the way you put up the things…I’ve read the topic with great interest and definitely will stick your blog routinely for other great posts. Many thanks for you.
condos in hyde park