How to programmatically set the value of a select box element using JavaScript?

We can set the value of a select box using JavaScript by accessing the element and changing its value property. This is useful for dynamically updating form selections based on user interactions or application state.

HTML Setup

First, let's create a select element with multiple options:

<select id="my-select">
    <option value="1">Select</option>
    <option value="2">Apple</option>
    <option value="3">Strawberry</option>
    <option value="4">Cherry</option>
    <option value="5">Guava</option>
</select>

Method 1: Using querySelector and value Property

The most common approach is to use querySelector to find the element and set its value property:

<select id="my-select">
    <option value="1">Select</option>
    <option value="2">Apple</option>
    <option value="3">Strawberry</option>
    <option value="4">Cherry</option>
    <option value="5">Guava</option>
</select>

<script>
// Get the select element
const mySelectBox = document.querySelector('#my-select');

// Set the value to 3 (Strawberry)
mySelectBox.value = '3';

// Display the selected option text
const selectedOption = mySelectBox.options[mySelectBox.selectedIndex];
console.log('Selected:', selectedOption.text);
</script>

Selected: Strawberry

Method 2: Using getElementById

You can also use getElementById if the select has an ID:

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

<script>
// Access by ID and set value
document.getElementById('fruit-select').value = 'banana';

// Verify the selection
const select = document.getElementById('fruit-select');
console.log('Current value:', select.value);
console.log('Selected text:', select.options[select.selectedIndex].text);
</script>

Current value: banana
Selected text: Banana

Method 3: Setting Selected Index

You can also set the selection by index instead of value:

<select id="color-select">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

<script>
const colorSelect = document.querySelector('#color-select');

// Set selection by index (0-based)
colorSelect.selectedIndex = 2; // Selects "Blue"

console.log('Selected by index:', colorSelect.value);
</script>

Selected by index: blue

Key Points

• Always use string values when setting select.value, even for numeric option values
• If the value doesn't match any option, the selection remains unchanged
• Use selectedIndex when you know the position but not the value
• The value property is the most reliable method for setting selections

Conclusion

Setting select box values programmatically is straightforward using the value property or selectedIndex. The querySelector approach with value assignment is the most commonly used method for dynamic form updates.