如何选中html中下拉列表中的选项的文字

现在我们有一个下拉列表，Html代码如下：

<select id="fruit_type">
    <option value ="f1">Apple</option>
    <option value ="f2">Banana</option>
    <option value ="f3">Orange</option>
    <option value ="f4">Pearl</option>
</select>

var fruit_select = document.getElementById("fruit_type");
var fruit_name = fruit_select.value;

这时需要先得到选中的菜单项的index，再取文字

var fruit_select = document.getElementById("fruit_type");
var fruit_index=fruit_type_select.selectedIndex;

// 这行会返回 f1
var fruit_id = fruit_type_select.options[fruit_type_index].value;

// 这行才能返回我们想要的 Apple
var fruit_name = fruit_type_select.options[fruit_type_index].text;