I’m working on a web form and need to extract the currently selected option from a dropdown menu using JavaScript. I have tried a few different approaches but I’m not sure which method is the most reliable.
Here’s my HTML structure:
<div>
<select id="categoryList">
<option value="apple">Apple</option>
<option value="banana" selected="selected">Banana</option>
<option value="orange">Orange</option>
</select>
</div>
What’s the best way to get the selected value programmatically? I want to be able to access both the value attribute and the display text if possible. Any help would be appreciated!
selectedIndex is your best bet here. I’ve been doing frontend dev for years and this method never lets me down across browsers.
const selectElement = document.getElementById('categoryList');
const selectedValue = selectElement.value;
const selectedText = selectElement.options[selectElement.selectedIndex].text;
This approach handles edge cases way better than other methods. When someone changes options dynamically or you’re working with forms that get modified after page load, selectedIndex stays accurate. I’ve watched querySelector break with complex form validation libraries, but this core DOM method just works.
Just watch out - always check if selectedIndex returns -1 before hitting the options array, especially when you’re clearing select elements programmatically.
u can simply do document.getElementById('categoryList').value to get the selected value. for the display text, try .options[.selectedIndex].text. been using it and it works fine!
Modern JavaScript has selectedOptions which is cleaner for this stuff. Just use document.getElementById('categoryList').selectedOptions[0] to grab the selected option directly, then pull both .value and .textContent from it. Found this when working with multi-select dropdowns where selectedIndex gets messy. selectedOptions gives you a live HTMLCollection that updates automatically when selections change. Really handy if you’re dealing with single and multiple selections in the same code. Just check the length first before accessing [0] so you don’t hit errors on empty selections.
Bob’s got the basics covered, but here’s what’ll save you major headaches later.
Yeah, you can manually grab values with getElementById, but what about multiple forms? Dynamic dropdowns? Syncing with other systems? You’ll end up writing the same JavaScript everywhere.
I learned this managing dozens of web forms across projects. Don’t just extract values - automate the whole data flow.
Latenode lets you build workflows that automatically capture form selections, process them, and send data wherever it goes. No custom JavaScript for every dropdown.
I’ve got one workflow handling all our form submissions. Users select options, Latenode grabs the value and display text, validates everything, then pushes it to our database or APIs automatically.
Best part? Works with any select element without coding each one. Set it up once and you’re done.
Check it out at https://latenode.com
querySelector works great for this. document.querySelector('#categoryList').value gets the selected value without any fuss. I’ve used it in plenty of projects - way simpler than dealing with selectedIndex.