Question: ```
<select class=fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">Grapes</option>
<option value="Kiwi">Kiwi</option>
</select>

```

it by default shows orange in the box but I want Grapes in a box. Please help
Thanks

Answer: 
For your HTML Dropdown

```
<select class=fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">Grapes</option>
<option value="Kiwi">Kiwi</option>
</select>

```

> 
> Using JS You can use **below code** to get desired result
> 
> 
> 

```
document.getElementsByClassName("fruits")[0].selectedIndex = 2 // will select Grapes

```

> 
> Just assign index 0,1..to length of dropdown to get selected value
> 
> 
>
You can use the selectedIndex property:

```js
$('select.fruits').prop('selectedIndex',  2);
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">Grapes</option>
<option value="Kiwi">Kiwi</option>
</select>
```

The code above will select the third option, since the index starts from 0.