কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্টে ড্রপডাউন (সিলেক্ট) সিলেক্টেড ভ্যালু কনসোলে দেখানো

onchange ইভেন্ট এবং options[selectedIndex].text ব্যবহার করে সিলেক্ট করা অপশনের টেক্সট কনসোলে প্রিন্ট করা যায়।

উদাহরণ

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Document</title> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css"> 
</head> 
<body> 
<select onchange="selectedSubjectName()" id="subjectName"> 
    <option>Javascript</option> 
    <option>MySQL</option> 
    <option>MongoDB</option> 
    <option>Java</option> 
</select> 
<script> 
    function selectedSubjectName() { 
        var subjectIdNode = document.getElementById('subjectName'); 
        var value = subjectIdNode.options[subjectIdNode.selectedIndex].text; 
        console.log("The selected value=" + value); 
    } 
</script> 
</body> 
</html>

Live Server দিয়ে চালান। ড্রপডাউন থেকে অপশন সিলেক্ট করলে কনসোলে মান দেখাবে।

আউটপুট

কনসোলে: The selected value=Java (সিলেক্ট অনুযায়ী)

  1. জাভাস্ক্রিপ্টে 'select' এলিমেন্টে addEventListener কেন কাজ করে না?

  2. জাভাস্ক্রিপ্টে টেক্সটবক্সের মান দেখানো

  3. জাভাস্ক্রিপ্টে href ভ্যালু পাওয়া

  4. CSS appearance প্রোপার্টি দিয়ে সিলেক্ট ইনপুটের ড্রপডাউন অ্যারো লুকানো