Aug 24, 2014

Copy DropDownList Data from a Website: Chrome Developer Tools/Firebug Tip

I was reviewing my old posts and found the post written approx 3 years ago. It uses Notepad++ to copy or extract HTML drop-down list options in plain text. I decided to do it WITHOUT Notepad++ because generally, people don’t have it.

Steps:

I am using Firebug in Firefox for this tutorial, but the same steps can be applied with Chrome developer tools.

1. Open website, right click on drop-down list and click “Inspect element in Firebug“.
2. Right click on selected element in Firebug and “Copy XPath
3. Open Console tab in Firebug and put following script:

var obj = $x('xpath here' + '/option');
for(var i=0;i<obj.length;i++){
console.log(obj[i].text);
}

4. Replace “xpath here” with copied xpath. (Don’t remove single quote)
5. Click ‘Run‘ to execute script.
6. you will get the data in result, select and copy it.

Video:

Hope, It saves your bunch of time.

5 comments

  1. I just tried this in Chrome and it worked perfectly- THANK YOU!!! Bookmarked!

    BTW, anyone know if you can save helpful snippets of code like this inside Chrome DevTools? I know I am going to want to re-run this again in the future. Thanks again!

  2. It’s not working for me.

    Error: SyntaxError: missing ) after argument list

    …x(‘.//*[@id=’:i’]’ + ‘/option’);
    for(var i=0;i<obj.length;i++){
    console.log(obj[…

    /* EXPR…ext); } (line 3)

  3. Great answer, worked for me. Thanks! You wouldn’t by any chance know of a tool that enables this functionality for repetitive workflows (lots of select dropdowns with just a few option items in each), so you could just right-click in the interface and have the elements made available in the copy buffer?

Leave a Reply

Your email address will not be published. Required fields are marked *