• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Convert a HTML Dropdown To an Object

Javascript · September 17, 2020

I had a rather interesting use-case recently where I needed to take the contents of an HTML dropdown on a website which had timezones and then convert it into an object. But, I’ve been there before. How many times have you wanted a country dropdown or age dropdown and just wanted to copy one from an existing website?

I just opted for a simple for..loop in this case.

// Query the dom for all option elements inside of the select dropdown called timezone
const options = document.querySelectorAll('#timezone option');
const obj = {};

for (const option of options) {
    obj.label = option.textContent.trim();
    obj.value = option.value;
}

I then use textContent to get the label from the option, and then I call trim to ensure that any whitespace doesn’t get copied over to my object. I call option.value to get the value. But, here is the thing… If you’re taking this data with the intention of iterating over it later on, you probably want it to be an iterable type such as an array or even a map.

By creating an object and pushing it into an array, it will give us an array of objects, with our dropdown values dictated by a label and value property which correspond to our dropdown.

// Query the dom for all option elements inside of the select dropdown called timezone
const options = document.querySelectorAll('#timezone option');
const values = [];

for (const option of options) {
	values.push({ label: option.textContent.trim(), value: option.value }); 
}

If you’re not a fan of arrays, maybe you prefer maps instead, you can do pretty much the same thing. The first argument is the name and the second argument of the set method is the value.

// Query the dom for all option elements inside of the select dropdown called timezone
const options = document.querySelectorAll('#timezone option');
const values = new Map();

for (const option of options) {
	values.set(option.textContent.trim(), option.value); 
}

In this instance, I just opened up Developer Tools in Chrome and ran it directly in the console of the website that I wanted to call it on. If you console log the final values, you can then copy them from within Chrome. Right-click the printed value, choose, “Store as global variable” and it should create a new variable called temp1 if this is the first time running this code and then you can write copy(temp1) to copy it to the clipboard.

Understandably, this is all pretty specific and non-typical Javascript, but if you ever want to copy a dropdown and convert it into an array, this will all do the trick.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How To Decompile And Compile Android APK's On A Mac Using Apktool
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz