Get selected value from div dropdown

Question

I have a dropdown from which I want to find the selected value. The dropdown is basically a big blue button which, when pressed, shows different customers:

When an option is clicked, the value changes to the selected customer.

What I want to do is access this value somewhere else in my HTML script.

 var Klanten = [ 'niet-declareerbaar', 'ING', 'NNPC', 'Meewind', ]; var Projects = [ 'alm', 'risicobeheer', 'RQ', 'overige', ]; var Tarieven = [ 'standaard tarief', 'korting (50%)', 'Cadeau', ] var project = 'overig'; var Tarief = 'standaard tarief'; var startYear = 2000; var endYear = 2020; var klant = 0; var year = 0; var selectedDays = new Array(); var mousedown = false; var mousemove = false; function loadKlanten() { for (var i = 0; i < Klanten.length; i++) { var doc = document.createElement('div'); doc.innerHTML = Klanten[i]; doc.classList.add('dropdown-item'); doc.onclick = (function () { var selectedKlant = i; return function () { klant = selectedKlant; document.getElementById('curKlant').innerHTML = Klanten[klant]; loadCalendarDays(); return klant; }; })(); document.getElementById('Klanten').appendChild(doc); } } function loadProjects() { document.getElementById('Projects').innerHTML = ''; for (var i = 0; i < Projects.length; i++) { var doc = document.createElement('div'); doc.innerHTML = Projects[i]; doc.classList.add('dropdown-item'); doc.onclick = (function () { var selectedProject = i; return function () { project = selectedProject; document.getElementById('curProject').innerHTML = Projects[project]; loadProjects(); return project; }; })(); document.getElementById('Projects').appendChild(doc); } } function loadTarief() { document.getElementById('Tarieven').innerHTML = ''; for (var i = 0; i < Tarieven.length; i++) { var doc = document.createElement('div'); doc.innerHTML = Tarieven[i]; doc.classList.add('dropdown-item'); doc.onclick = (function () { var selectedTarief = i; return function () { Tarief = selectedTarief; document.getElementById('curTarief').innerHTML = Tarieven[Tarief]; loadTarief(); return Tarief; }; })(); document.getElementById('Tarieven').appendChild(doc); } } var start_hour=0; var end_hour = 10; var hour = 0; function loadHours() { document.getElementById('hours').innerHTML = ''; for (var i = start_hour; i <= end_hour; i++) { var doc = document.createElement('div'); doc.innerHTML = i; doc.classList.add('dropdown-item'); doc.onclick = (function () { var selectedHour = i; return function () { hour = selectedHour; document.getElementById('curHour').innerHTML = hour; loadHours(); return hour; }; })(); document.getElementById('hours').appendChild(doc); } } function loadCalendarYears() { document.getElementById('years').innerHTML = ''; for (var i = startYear; i <= endYear; i++) { var doc = document.createElement('div'); doc.innerHTML = i; doc.classList.add('dropdown-item'); doc.onclick = (function () { var selectedYear = i; return function () { year = selectedYear; document.getElementById('curYear').innerHTML = year; loadCalendarDays(); return year; }; })(); document.getElementById('years').appendChild(doc); } } function loadCalendarDays() { document.getElementById('calendarDays').innerHTML = ''; var tmpDate = new Date(year, month, 0); var num = daysInMonth(month, year); var dayofweek = tmpDate.getDay()-1; // find where to start calendar day of week for (var i = 0; i <= dayofweek; i++) { var d = document.createElement('div'); d.classList.add('day'); d.classList.add('blank'); document.getElementById('calendarDays').appendChild(d); } for (var i = 0; i < num; i++) { var tmp = i + 1; var d = document.createElement('div'); d.id = 'calendarday_' + tmp; d.className = 'day'; d.innerHTML = tmp; d.dataset.day = tmp; d.addEventListener('click', function () { this.classList.toggle('selected'); if (!selectedDays.includes(this.dataset.day)) selectedDays.push(this.dataset.day); else selectedDays.splice(selectedDays.indexOf(this.dataset.day), 1); }); d.addEventListener('mousemove', function (e) { e.preventDefault(); if (mousedown) { this.classList.add('selected'); if (!selectedDays.includes(this.dataset.day)) selectedDays.push(this.dataset.day); } }); d.addEventListener('mousedown', function (e) { e.preventDefault(); mousedown = true; }); d.addEventListener('mouseup', function (e) { e.preventDefault(); mousedown = false; }); document.getElementById('calendarDays').appendChild(d); } var clear = document.createElement('div'); clear.className = 'clear'; document.getElementById('calendarDays').appendChild(clear); } function daysInMonth(month, year) { var d = new Date(year, month + 1, 0); return d.getDate(); } window.addEventListener('load', function () { var date = new Date(); month = date.getMonth(); year = date.getFullYear(); document.getElementById('curKlant').innerHTML = Klanten[klant]; document.getElementById('curTarief').innerHTML = Tarief; document.getElementById('curHour').innerHTML = hour; document.getElementById('curProject').innerHTML = project; loadProjects(); loadKlanten(); loadTarief(); loadCalendarDays(); loadHours(); });

 body, * { padding: 0px; margin: 0px; box-sizing: border-box; } .calendar { background-color: white; padding: 20px; } .calendar .dropdown { display: none; position: absolute; background-color: #fff; color: #0047bA; text-align: center; font-size: 14pt; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; width: 160px; left: 0px; z-index: 2000; } .calendar .dropdown .dropdown-item { cursor: pointer; opacity: 0.7; transition: 0.5s opacity; } .calendar .dropdown .dropdown-item:hover { opacity: 1; } .calendar .hours{ display: none; } .calendar .tarief { display: none; } .calendar .title { text-align: center; font-size: 20pt; } .calendar .calendar-btn { float: left; background-color: #0047bA; color: white; text-align: center; font-size: 14pt; padding-top: 5px; padding-bottom: 5px; position: relative; width: 20%; cursor: pointer; transition: 0.5s background-color; } .calendar .month-btn { width: 40%; height: 55px; } .calendar .project-btn { height: 55px; } .calendar .calendar-btn:hover { background-color: #1f71a1; } .calendar .hours-btn{ float: middle; height: 55px; } .calendar .tarief-btn { float: left; height: 55px; } .calendar .calendar-dates .days .day { float: left; width: 12%; margin: 1%; padding: 1%; font-size: 13pt; text-align: center; border-radius: 10px; border: solid 1px #ddd; } .calendar .calendar-dates .days .day.blank { background-color: white; border: none; } .calendar .calendar-dates .days .day.selected { background-color: #0047bA; color: white; cursor: pointer; opacity: 0.9; transition: 0.1s opacity; } .calendar .calendar-dates .days .day.selected:hover { opacity: 1; } .calendar .calendar-dates .days .day.label { height: 40px; background-color: white; color: black; border: none; font-weight: bold; } .clear { clear: both; } @media only screen and (max-width: 960px) { .calendar { width: 100%; margin: 0px; margin: 0px; box-sizing: border-box; position: relative; left: 0px; } }

 <!DOCTYPE html> <div> <html> <div> <head> <!-- CSS property to place div side by side --> <style> #middlebox { float: left; width: 65%; height: 400px; } #rightbox { float: right; background-color: white; width: 35%; height: 450px; } h1 { color: green; text-align: center; } </style> </head> <div> <div id="middlebox"> <body> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta charset="utf-8"> <link href="/static/calendar3.css" rel="stylesheet"> </head> <body> <div class="calendar" id="calendar"> <div class="calendar-btn month-btn" onclick="$('#Klanten').toggle('fast')"> <span id="curKlant"></span> <div id="Klanten" class="months dropdown"></div> </div> <div class="calendar-btn project-btn" onclick="$('#Projects').toggle('fast')"> <span id="curProject"></span> <div id="Projects" class="projects dropdown"></div> </div> <div class="calendar-btn hours-btn" onclick="$('#hours').toggle('fast')"> <span id="curHour"></span> <div id="hours" class="hours dropdown"></div> </div> <div class="calendar-btn tarief-btn" onclick="$('#Tarieven').toggle('fast')"> <span id="curTarief"></span> <div id="Tarieven" class="Tarieven dropdown"></div> </div> <div class="clear"></div> <div class="calendar-dates"> <div class="days"> <div class="day label">MON</div> <div class="day label">TUE</div> <div class="day label">WED</div> <div class="day label">THUR</div> <div class="day label">FRI</div> <div class="day label">SAT</div> <div class="day label">SUN</div> <div class="clear"></div> </div> <div id="calendarDays" class="days"> </div> </div> <html> <head> <style> .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ } .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } </style> </head> <body> <style> .myBtn { border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; transition-duration: 0.2s; cursor: pointer; } .myBtn1 { background-color: white; color: black; border: 2px solid #0047bA; } .myBtn1:hover { background-color: #0047bA; color: white; } </style> <button id="myBtn" class="myBtn myBtn1">Uren indienen</button> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <p>Je staat op het punt om je uren in te dienen, weet je zeker dat alles klopt?</p> <html> <head> <style> .button { border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; transition-duration: 0.2s; cursor: pointer; } .button1 { background-color: white; color: black; border: 2px solid #0047bA; } .button1:hover { background-color: #0047bA; color: white; } </style> </head> <body> <a href="{{ url_for('schrijven') }}"> <button class="button button1">Ja, dien mijn uren in</button></a> </body> </div> </div> <script> var modal = document.getElementById("myModal"); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body> </html> </div> <script type="text/javascript" src="/static/jscodes/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="/static/jscodes/calendar3.js" async></script> </body> </div> <div class="card"> <div class="rightbox_buttons" id="rightbox"> <div> <h2>Welke uren heb ik geschreven?</h2> </div> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family: Arial;} /* Style the tab */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } </style> </head> <body> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'week')">Per week</button> <button class="tablinks" onclick="openCity(event, 'maand')">Per maand</button> <button class="tablinks" onclick="openCity(event, 'klant')">Per klant</button> </div> <div id="week" class="tabcontent"> <p>Je hebt deze week geschreven: </p> </div> <div id="maand" class="tabcontent"> <p>Je hebt deze maand geschreven:</p> </div> <div id="klant" class="tabcontent"> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Get Selected Option Value</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(document).ready(function(){ $("select.klant").change(function(){ var selectedCountry = $(this).children("option:selected").val(); alert("You have selected the country - " + selectedCountry); }); }); </script> </head> <body> <form> <label>kies klant:</label> <select class="klant"> {% for klant in klant %} <option value="{{ klant }}" SELECTED>{{ klant }}</option> {% endfor %} </select> <input type="text" size="30" name="display" id="display" /> </form> </body> </html> </div> <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } </script> </body> </html> </div> </div> </div> </div> </div> </body> </html> {%endblock%}

---

Preferably, I want to save the selected customer in a new variable (so I can return it in my HTML) and use it later on. How would I be able to do this?

Answer 1

You to put the below code to save the selected value inside a variable inside the onclick event.

var selected_Value= $('. dropdownid :selected').val();