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

html-css014

如何选中html中下拉列表中的选项的文字,第1张

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

[html] view plain copy

<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>

这个是时候我们想拿到选中的水果的名字，比如Apple，下面的代码不行：

[javascript] view plain copy

var fruit_select = document.getElementById("fruit_type")

var fruit_name = fruit_select.value

这个时候只能拿到水果的id，比如 f1

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

[javascript] view plain copy

var fruit_select = document.getElementById("fruit_type")

var fruit_index=fruit_type_select.selectedIndex

[javascript] view plain copy

// 这行会返回 f1

var fruit_id = fruit_type_select.options[fruit_type_index].value

[javascript] view plain copy

// 这行才能返回我们想要的 Apple

var fruit_name = fruit_type_select.options[fruit_type_index].text

你选中的这行文本需要放在标签里面才能控制。

假如你有一行文字放在<b>标签里面，你写了事件选择文字的时候弹出颜色选择菜单，当你选择一种颜色的时候，会产生对应的16进制值，如：#65342F，你用js代码获取对应的<b>标签，然后设置color属性值为这个颜色对应的值就行了。。。