JavaScript හි ඩ්රොප්ඩවුන් ලැයිස්තු සමග වැඩ කිරීම
මෙම පාඩමේ දී අපි select ටැගය සමග වැඩ කිරීම අධ්යයනය කරමු,
එය ඩ්රොප්ඩවුන් ලැයිස්තුවක් නිරූපණය කරයි. ඔබ මෙම ටැගය සමඟ HTML හි වැඩ කිරීමට නොදන්නේ නම්,
පළමුව මෙම සබැඳියෙන් යොමු පොතෙහි එහි ව්යුහය අධ්යයනය කරන්න:
select.
අපි දැන් JavaScript හරහා මෙම ටැගය සමඟ වැඩ කරන ආකාරය බලමු. අපට පහත ඩ්රොප්ඩවුන් ලැයිස්තුව ලබා දී ඇතැයි සිතමු:
<select id="select">
<option>one</option>
<option selected>two</option>
<option>three</option>
</select>
විචල්යයකට සෙලෙක්ට් එකට සබැඳියක් ලබා ගනිමු:
let select = document.querySelector('#select');
දැන් සෙලෙක්ට් එක වෙනස් කිරීමේදී තිරයේ තෝරාගත් ලැයිස්තු අයිතමයේ පෙළ ප්රදර්ශනය කරමු.
මෙය සිදු කිරීම සඳහා අපගේ සෙලෙක්ට් එකේ value ගුණාංගය කියවිය යුතුය:
select.addEventListener('change', function(){
console.log(this.value);
});
සෙලෙක්ට් එකක්, ඡේදයක් සහ බොත්තමක් ලබා දී ඇත. බොත්තම ක්ලික් කිරීමෙන් ලැයිස්තුවේ තෝරාගත් අයිතමයේ පෙළ ඡේදයට ප්රදර්ශනය කරන්න.
2020 සිට 2030 දක්වා වසර ඩ්රොප්ඩවුන් ලැයිස්තුවක් සාදන්න.
ලැයිස්තුවේ යම් අයිතමයක් තෝරාගැනීමේදී, එම වසර අධික අවුරුද්දක් ද නැතහොත් නොවේ ද යන්න පිළිබඳ පණිවිඩයක් ප්රදර්ශනය කරන්න.
