使用javascript访问下拉列表的选定选项

access selected option of dropdown with javascript

本文关键字：选项 下拉列表 javascript 访问 使用      更新时间：2023-09-26

我创建了一个小JS函数，它检查输入字段的值，并将它们放在表单上：

function insertText()
{
result = document.new_link['link[link]'].value;
document.getElementById("link-link").innerHTML=result;
}

它的工作非常出色。（new_link是表单的名称）

现在我用一个选择下拉菜单做同样的事情：

<select name="link[link_category]">
<option value="1">Something</option>
</select>

function insertText2()
{
result = document.new_link['link[link_category]'].value;
document.getElementById("link-category").innerHTML=result;
}

这里的结果是我不喜欢的值"1"。我想要输出"Something"，这样当它被选中时，选项的内容就是什么。

我试过这个：

function insertText2()
{
result = document.new_link['link[link_category]'].content;
document.getElementById("link-category").innerHTML=result;
}

但它给了我"未定义"的输出。我也尝试过"短信"，但没有成功。我需要做些什么才能达到目标？

谢谢你的帮助！

这个怎么样：

function insertText2()
{
   var dropdown = document.new_link['link[link_category]'];
   var selOption = dropdown[dropdown.selectedIndex];
   document.getElementById("link-category").innerHTML=selOption.innerHTML;
}

所以你抓住了下拉元素。然后找出选定的索引，并使用它来获取实际选定的选项。一旦你得到了，你就可以显示innerHTML，它应该是你想要的值。

您可以将"Something"作为值放入。你在这里使用"1"有什么原因吗？

<select name="link[link_category]">
    <option value="Something">Something</option>
</select>

单独的选项元素可作为HTMLCollection:使用

document.new_link['link[link_category]'].childNodes
    OR
document.new_link['link[link_category]'].options

当前选择的选项可用作索引：

document.new_link['link[link_category]'].selectedIndex

所选选项的"标签"可在以下位置找到：

var selectElement = document.new_link['link[link_category]'];
selectElement.options[selectElement.selectedIndex].innerHTML;
相关文章：