မေရးျဖစ္တာ ၾကာခဲ႔ပါျပီ။
ကိုယ္တိုင္ Application တစ္ခုေရးေနရင္ Jquery plugin တစ္ခုကို အသံုး ျပဳရင္းက version update ေတြေၾကာင့္ ေတာ္ေတာ္ လည္သြားခဲ႔တယ္။
ဒါေၾကာင့္ ဖတ္မိသူလည္း ပညာရ ကိုယ္တိုင္လည္း ျပန္ၾကည့္ႏိုင္ေအာင္ ဒီပို႔စ္ေလးကို ေရးလိုက္ပါတယ္။
Jquery Chained Dropdown
ဘယ္လိုမ်ိဳးလဲဆိုေတာ႔ သင္႔အေနနဲ႔ category ေတြကိုေရြးခ်ယ္ရာမွာ dropdown(<select> tag)ကိုအသံုးျပဳႏိုင္ပါတယ္။ ဒါေပမယ့္ သင့္ ရဲ႕ category မွာ sub category ရွိျပီး အဲဒီ sub category ေအာက္မွာလည္း sub category ရွိတယ္ဆိုပါစို႔။
Example
1. Furniture
1.Kitchen
1.cardboard
2.basin
2.Office
1.desk
2.chair
3.Bed Room
1.Bed
2.Bed Sheet
အဲလိုမ်ိဳး category ေတြက အဆင့္ဆင့္တည္ရွိေနမယ္ဆိုရင္ Jquery chained plugin ကအသံုး၀င္ပါလိမ္႔မယ္။
Demo link ေလးကို ၾကည့္လိုက္ရင္ ပိုရွင္းသြားပါလိမ္႔မယ္။
Demo ကိုၾကည့္ျပီးရင္ plugin ရဲ႕ အသံုး၀င္ပံုေလးကိုေတြ႔ရမွာပါ။
ျပႆနာက demo page က အသံုးျပဳျပထားတဲ႔ plugin က update မျဖစ္ေတာပါဘူး။
အခုစာေရးတဲ႔ အခ်ိန္မွာေတာ႔ version က 2.0.0 အထိရွိေနပါျပီ။
demo က version ကေတာ႔ version 0.9.5 ပဲျဖစ္ပါတယ္။အဲဒါေၾကာင့္ ေနာက္ဆံုးထြက္ထားတဲ႔ jquery.js version:3.2.1 နဲ႔ အဆင္မေျပပါဘူး။
ေနာက္ဆံုးရွာေဖြရင္းနဲ႔မွ အဆင္ေျပဆံုးအေနနဲ႔ update version page ကိုရွာေတြ႔ခဲ႔ပါတယ္။ GitHub မွာပါ။
အဲဒီ page မွာ အသံုးျပဳပံုလဲ ပါပါတယ္။
အဆင္ေျပေျပ အသံုးျပဳႏိုင္ၾကပါေစ။
တစ္ဆက္တည္း ေနာက္ထပ္အခက္အခဲတစ္ခုထပ္ျဖစ္ပါတယ္။အဲဒါကေတာ႔ dropdown အသံုးျပဳတာက သံုခုဆိုေတာ႔ option ေတြကို select လုပ္ေပးဖုိ႔အတြက္အခက္ေတြ႔လာပါတယ္။
dropdown သံုးခုလံုးကို သူ႔ အဆင္႔နဲ႔သူ select လုပ္ေပးႏိုင္ဖို႔အတြက္ ကိုယ္တုိင္ js code ေရးသားခဲ႔ပါတယ္။ တစ္ခုရွိတာက မူရင္ plugin မွာေတာ႔ multiple parent ကို အသံုးျပဳခြင့္ေပးထားေပမယ့္ ကိုယ္တုိင္ေရးထားတဲ႔ code မွာေတ႔ာ မလိုအပ္လို႔မထည့္ထားပါဘူး။
အဆင္ေျပမယ္ဆုိရင္ လြပ္လပ္စြာ ကူးယူအသံုး ျပဳႏိုင္ပါတယ္။
//multiple parent not supported
var ids = ["lvl1","lvl2","lvl3"];
var selectValue = "item_5";
//selectValue refer to latest level in ids array.
//if you want to select option for level 2 then use var ids = ["lvl1","lvl2"];
function chainSelection(ids,selectValue)
{
for(i=0; i< ids.length ; i++)
{
selectValue = $("#"+ids[ids.length-i-1]+" option[value="+selectValue+"]").attr("selected","selected").attr("data-chained");
console.log(selectValue);
}
}
chainSelection(ids,selectValue);
တစ္ဆက္တည္း ေနာက္ထပ္အခက္အခဲတစ္ခုထပ္ျဖစ္ပါတယ္။အဲဒါကေတာ႔ dropdown အသံုးျပဳတာက သံုခုဆိုေတာ႔ option ေတြကို select လုပ္ေပးဖုိ႔အတြက္အခက္ေတြ႔လာပါတယ္။
dropdown သံုးခုလံုးကို သူ႔ အဆင္႔နဲ႔သူ select လုပ္ေပးႏိုင္ဖို႔အတြက္ ကိုယ္တုိင္ js code ေရးသားခဲ႔ပါတယ္။ တစ္ခုရွိတာက မူရင္ plugin မွာေတာ႔ multiple parent ကို အသံုးျပဳခြင့္ေပးထားေပမယ့္ ကိုယ္တုိင္ေရးထားတဲ႔ code မွာေတ႔ာ မလိုအပ္လို႔မထည့္ထားပါဘူး။
အဆင္ေျပမယ္ဆုိရင္ လြပ္လပ္စြာ ကူးယူအသံုး ျပဳႏိုင္ပါတယ္။
//multiple parent not supported
var ids = ["lvl1","lvl2","lvl3"];
var selectValue = "item_5";
//selectValue refer to latest level in ids array.
//if you want to select option for level 2 then use var ids = ["lvl1","lvl2"];
function chainSelection(ids,selectValue)
{
for(i=0; i< ids.length ; i++)
{
selectValue = $("#"+ids[ids.length-i-1]+" option[value="+selectValue+"]").attr("selected","selected").attr("data-chained");
console.log(selectValue);
}
}
chainSelection(ids,selectValue);
EmoticonEmoticon