salman.ali
New member
Hye!
I am trying to add a submenu at option4 i.e as user clicks option 4 , a submenu appears on right. Further I have to save both the Parent(Option 4) and selected option in the sub menu as its child and return both in an array.
I am trying to add a submenu at option4 i.e as user clicks option 4 , a submenu appears on right. Further I have to save both the Parent(Option 4) and selected option in the sub menu as its child and return both in an array.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container" style ="text-align: center;">
<h3>Select Option</h3>
<select id = "myselect">
<option>All</option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option> Option4</option>
</select>
<h2>Result</h2>
</div>
<script src="script.js"></script>
</body>
</html>
Code:
<script>
let selection = document.querySelector('select');
let result = document.querySelector('h2');
selection.addEventListener('change', ()=>
{
result.innerText = selection.options[selection.selectedIndex].value; // index number
console.log(selection.selectedIndex);
console.log($('#myselect').val());
})
</script>