How to set select option ‘selected’ by value in JavaScript or jQuery?

Here’s a detailed guide to setting <select> options as selected by their values in JavaScript and jQuery, including various scenarios and edge cases:

1. Vanilla JavaScript Methods

Method 1: Direct Value Assignment (Most Efficient)

Directly set the value property of the <select> element.

// Single-select dropdown
document.getElementById('fruit').value = 'banana';

// Multi-select dropdown (select multiple values)
document.getElementById('colors').value = ['red', 'blue'];

HTML:

<select id="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

<select id="colors" multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Method 2: Loop Through Options (Advanced Control)

Manually iterate through options for custom logic (e.g., partial matches).

// Single-select
const select = document.getElementById('fruit');
const desiredValue = 'banana';

Array.from(select.options).forEach(option => {
  option.selected = (option.value === desiredValue);
});

// Multi-select
const multiSelect = document.getElementById('colors');
const desiredValues = ['red', 'blue'];

Array.from(multiSelect.options).forEach(option => {
  option.selected = desiredValues.includes(option.value);
});

2. jQuery Methods

Method 1: Use .val() (Simplest Approach)

// Single-select
$('#fruit').val('banana');

// Multi-select
$('#colors').val(['red', 'blue']);

Method 2: Attribute Selector (Explicit Selection)

// Single-select
$('#fruit option[value="banana"]').prop('selected', true);

// Multi-select
$('#colors option[value="red"], #colors option[value="blue"]')
  .prop('selected', true);

3. Handling Edge Cases

Dynamic Options (Ensure DOM Readiness)

Execute code after the DOM is fully loaded.

Vanilla JS:

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('fruit').value = 'banana';
});

jQuery:

$(document).ready(() => {
  $('#fruit').val('banana');
});

Non-Existent Values

No option will be selected if the value doesn’t exist.

// Vanilla JS
document.getElementById('fruit').value = 'grape'; // No selection

// jQuery
$('#fruit').val('grape'); // No selection

Numeric Values

Convert numbers to strings (HTML attributes are strings).

<select id="quantity">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

JavaScript:

document.getElementById('quantity').value = '2'; // ✅ Correct (string)
document.getElementById('quantity').value = 2;   // ❌ Avoid (number)

4. Full Workflow Example

HTML

<select id="vehicle">
  <option value="car">Car</option>
  <option value="bike">Bike</option>
  <option value="boat">Boat</option>
</select>

<select id="sizes" multiple>
  <option value="s">Small</option>
  <option value="m">Medium</option>
  <option value="l">Large</option>
</select>

<button onclick="selectCar()">Select Car</button>
<button onclick="selectMediumLarge()">Select M/L</button>

JavaScript

// Vanilla JS
function selectCar() {
  document.getElementById('vehicle').value = 'car';
}

function selectMediumLarge() {
  document.getElementById('sizes').value = ['m', 'l'];
}

// jQuery
$('#vehicle').val('car');
$('#sizes').val(['m', 'l']);

5. Comparison Table

Task	Vanilla JS	jQuery
Set Single Value	select.value = 'value'	$('#select').val('value')
Set Multiple Values	select.value = ['val1', 'val2']	$('#select').val(['val1', 'val2'])
Target Specific Option	Loop through options	$('#select option[value="x"]')
Dynamic Options	Use DOMContentLoaded event	Use $(document).ready()

Key Takeaways

• Vanilla JS: Use .value for simplicity or loops for complex logic.
• jQuery: Use .val() for brevity and cross-browser consistency.
• Multi-Selects: Pass arrays to select multiple options.
• Edge Cases: Handle numeric values as strings and check for DOM readiness.