JavaScript හි ඩ්‍රොප්ඩවුන් ලැයිස්තු සමග වැඩ කිරීම

මෙම පාඩමේ දී අපි select ටැගය සමග වැඩ කිරීම අධ්‍යයනය කරමු, එය ඩ්‍රොප්ඩවුන් ලැයිස්තුවක් නිරූපණය කරයි. ඔබ මෙම ටැගය සමඟ HTML හි වැඩ කිරීමට නොදන්නේ නම්, පළමුව මෙම සබැඳියෙන් යොමු පොතෙහි එහි ව්‍යුහය අධ්‍යයනය කරන්න: select.

අපි දැන් JavaScript හරහා මෙම ටැගය සමඟ වැඩ කරන ආකාරය බලමු. අපට පහත ඩ්‍රොප්ඩවුන් ලැයිස්තුව ලබා දී ඇතැයි සිතමු:

html<select id="select">
  <option>one</option>
  <option selected>two</option>
  <option>three</option>
</select>

විචල්‍යයකට සෙලෙක්ට් එකට සබැඳියක් ලබා ගනිමු:

javascriptlet select = document.querySelector('#select');

දැන් සෙලෙක්ට් එක වෙනස් කිරීමේදී තිරයේ තෝරාගත් ලැයිස්තු අයිතමයේ පෙළ ප්‍රදර්ශනය කරමු. මෙය සිදු කිරීම සඳහා අපගේ සෙලෙක්ට් එකේ value ගුණාංගය කියවිය යුතුය:

javascriptselect.addEventListener('change', function(){
  console.log(this.value);
});