Get selected value in dropdown list using JavaScript

Digging deeper: values and responses

Fetching values and text from a dropdown

How to extract the value and text from the selected option:

let selectElement = document.getElementById('mySelect'); // The almighty divining rod!🪄
let selectedValue = selectElement.value; // Voila! Retrieved the chosen value.
let selectedText = selectElement.options[selectElement.selectedIndex].text; //And the text! (No magic tricks here, I promise 😉)
console.log(`Selected value: ${selectedValue}, selected text: ${selectedText}`);


Here, .options and .selectedIndex are essential properties in web navigation for acquiring an exact value.

Utilizing event handlers for responsiveness

To increase interactivity and responsiveness:

selectElement.onchange = function() {
  let selectedValue = this.value; // Shazam! The new selection, ladies and gentlemen🎩🐇!
  console.log(`The selection just changed to: ${selectedValue}`); // 🎆Ta-da!🎆
};


The onchange event acts as the unseen magician's assistant, triggering functions upon a user's selection.

Mastering code modularity in dropdown manipulation

Designing interconnected functions

For easy-to-read, maintainable code, encapsulate operations in functions:

function getDropdownValue(selector) {
  return document.querySelector(selector).value; // Enter the selector, exit the value!
}

function onDropdownChange(selector, handler) {
  document.querySelector(selector).onchange = handler; // The manipulator of puppet strings.🎭
}


These functions help in structurally organizing your code and reliably responding to end-user actions.

Transferring values between form elements

To imbibe an input element with the dropdown value:

document.getElementById('myInput').value = getDropdownValue('#mySelect'); //The secret handoff...🕵️‍♂️


This demonstrates how to transfer values between different form elements.

Advanced Dropdown Handling: Frameworks, alerts, and responsiveness

A tour of libraries and frameworks

How to handle dropdowns using jQuery or AngularJS:

jQuery:

$('#mySelect').on('change', function() {
  let value = $(this).val(); // jQuery-style teleportation! 🌀
  let text = $(this).find(':selected').text(); // Finders, keepers.
  console.log(`Value: ${value}, Text: ${text}`); // Freshly extracted!
});


AngularJS:

Bind your select to a model and use expressions to display:

<select ng-model="selectItem" ng-options="item.value as item.text for item in items"></select>
<p>Value: {{selectItem.value}}</p> <!-- Angular's got your value right here -->
<p>Text: {{selectItem.text}}</p> <!-- And your text here -->


Dynamic form responsiveness

For input fields, consider onkeyup to provide real-time feedback as a user types.

Alerting users with prompt feedback

Using JavaScript's alert() function to present feedback:

selectElement.onchange = function() {
  alert('Your selection just changed!'); // A fireworks display in a message box🎇.
}; 
