What's the easiest way to add an option to a dropdown using jQuery?

With jQuery, you can add a new <option> to your <select> element by either building a string or creating a new DOM element. Here’s the most straightforward approach:

$('#mySelect').append(
  $('<option>', {
    value: 'newValue',
    text: 'New Option'
  })
);

1. $('<option>'): Dynamically creates a new <option> element.
2. .append(): Inserts that <option> into the <select> element with the ID #mySelect.
3. { value: 'newValue', text: 'New Option' }: Sets the option’s value attribute and visible text.

Alternate One-Liner

If you just want a quick inline addition (without using an object):

$('#mySelect').append('<option value="newValue">New Option</option>');

This method is fine for simpler or smaller-scale tasks, but the object form can be more readable, especially when you have multiple attributes to set.

Further Reading: DOM Manipulation & JavaScript Fundamentals

Dynamically adding options is one of many tasks in front-end web development. For a deeper, more robust grasp of JavaScript (including modern ES6+ features, async operations, and more), consider:

• Grokking JavaScript Fundamentals
  Build a strong foundation in JavaScript, ensuring you’re comfortable with everything from basic syntax to advanced concepts.

If you’re also preparing for coding interviews, Grokking the Coding Interview: Patterns for Coding Questions is an industry-favorite resource. And for one-on-one practice under real interview conditions, check out the Coding Mock Interviews at DesignGurus.io, where ex-FAANG engineers provide hands-on feedback.

In short, just use $('#mySelect').append($('<option>', { value: '...', text: '...' })) to seamlessly add new options to your dropdown, keeping your code concise and maintainable.