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: 
If you want to use jQuery, then do it like this 

```
$("select.fruits").val("Grapes");

```

Javascript 

```
var element = document.getElementsByClassName('fruits')[0];
element.value = valueToSelect;

```
1. You can use the selector `:nth-child()` index starts at 1
2. You can use method `.eq()` index starts at 0

```js
$(".fruits").find('option').eq(0).css('color', 'blue')//index starts at 0 so first option will be blue
$(".fruits").find('option:nth-child(2)').css('color', 'red');//index starts at 1 so second option will be red
```

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