Convert html dropdown element into a textual representation

Convert a set of select options into readable text using JavaScript.

Take a webpage showing a select dropdown

<select>
    <option>- Select -</option>
    <option value="a">Choice 1</option>
    <option value="b">Choice 2</option>
    <option value="c">Choice 3</option>
</select>

and convert it into a textual representation:

- Select -
Choice 1: a
Choice 2: b
Choice 3: c

Step 1. Open Web Developer Tools:

Firefox: Tools > Browser Tools > Web Developer Tools.

Chrome: View > Developer > Developer Tools.

Step 2: Inspect the html select element using the element picker so that the $0 variable can be used in the JavaScript console.

Step 3: In the JavaScript console, use the following script to display the html select options as text:

Array.from($0).map(entry => entry.innerText + (entry.hasAttribute('value') ? ': ' + entry.value : '')).join('\n')

When the script is run, the console will display a string representation of the dropdown choices:

"- Select -
Choice 1: a
Choice 2: b
Choice 3: c"

Step 4: Wrap the code with the copy() function to store the resulting string in the clipboard:

copy(Array.from($0).map(entry => entry.innerText + (entry.hasAttribute('value') ? ': ' + entry.value : '')).join('\n'))
View this page on GitHub.
Posted .

Comments

Leave a Reply