Form Hacking

Change the Values of an Option Select list

April 7, 2021 by cryan.com

This is something that I learned a long time ago at a Web Developer's conference

Developers should put in place to make sure that people are not adding improper data. The best-case scenario would be to add this check to the browser.

QA teams should add a check to make sure that field data validation is actually occuring.

HTML Select Options

Developers usually use HTML form select option functionality to make it easy for users to select from a set of options. This is more commonly used as selecting states. There's even a GitHub code snippet available to make it easy for developers.

Challenge the Code

Using jQuery, you can change the values in a select menu. This is useful to test to make sure that form validation is happening. Hopefully, it's done on the client-side and not on the server-side.

To do this you'll need to know the name of the select tag. This might be an ID or a class name. If there isn't a name, you could always use an XPath tree. (That is a bit more complex for this post.)

We'll assume that it has a Class Name or an ID set. You can find the class name/id by clicking on the field and right-clicking and select inspect.

Change the Options in a Form

Class

Change the "selectClass" to the class name of the select field. You can't append values, so we have to wipe out the options and put in new options.

var newOptions = {
    "Option 1":"option-1",
    "Option 2":"option-2"
};
var $el = $('.selectClass');
$el.html(' ');
$.each(newOptions, function(key, value) {
    $el.append($("<option></option>")
    .attr("value", value).text(key));
});

ID

Change the "selectID" to the id of the select field. You can't append values, so we have to wipe out the options and put in new options.

var newOptions = {
    "Option 1":"option-1",
    "Option 2":"option-2"
};
var $el = $('.selectID');
$el.html(' ');
$.each(newOptions, function(key, value) {
    $el.append($("<option></option>")
    .attr("value", value).text(key));
});

Simple Steps

Here are the simple steps

• Visit a website that has a Select Option on the page.
• Open up the Console
• Paste in the code above and hit return
• You should immediate change on the page.
• Submit the form (after filling in all the required fields)
• How does the web application handle it?