August 24th, 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.

  • http://www.tennoe.no/ Bjørn Tennøe

    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?

  • http://www.hookang.com/ Hoo Kang

    Thank you. This was a huge time saver.