【问题标题】:How to get selected option ID with Javascript not JQuery如何使用 Javascript 而不是 JQuery 获取选定的选项 ID
【发布时间】:2012-09-19 11:35:39
【问题描述】:

我需要为两个选择标签使用 Javascript 而不是 JQuery 打印选定的选项 ID。

假设我们有多个选择标签。

<select  onchange="showOptions(this)" id="my_select1">
   <option value="a1" id="ida1">Option1</option>
   <option value="a2" id="ida2">Option2</option>
</select>

<select  onchange="showOptions(this)" id="my_select2">
   <option value="b1" id="idb1">Option1</option>
   <option value="b2" id="idb2">Option2</option>
</select>

我发现了以下方式options[selectedIndex].id,但我怎么知道该行指的是哪一个..

有什么建议吗?

我尝试了以下方法,但没有成功。

<select id="my_select" onchange="showOptions2(this)">
   <option value="o1" id="id1">Option1</option>
   <option value="o2" id="id2">Option2</option>
</select>


<script type = "text/javascript">


function showOptions2(s){
 var adVALUE = console.log(s[s.selectedIndex].value); // get value
 var adID = console.log(s[s.selectedIndex].id); // get id

  alert(adID);

}
</script>

【问题讨论】:

  • 你怎么知道那一行是指哪一个?什么?你把代码放在任何你想找到id的地方。

标签: javascript html select


【解决方案1】:
<select onchange="showOptions(this)">
   ...

这个函数会做的工作

function showOptions(s) {
  console.log(s[s.selectedIndex].value); // get value
  console.log(s[s.selectedIndex].id); // get id
}

请注意,除非您将它们用于其他目的,否则您可以省略 select 元素上的 id

jsbin 示例:http://jsbin.com/adopiz/2/edit

【讨论】:

  • 然后我删除我原来的评论,并提供+1! =)
  • 我更新了我的问题,并根据 Fabrizio 的回答添加了我尝试过的内容,但没有奏效。
  • 我确实打开了 jsbin,似乎当我试图提醒返回的 id 值时,它再次显示未定义。
  • george 该示例运行良好:jsbin.com/adopiz/4/edit 这显示了一个带有 id on change 事件的警报
  • 谢谢法布里齐奥!非常感谢您的帮助!
猜你喜欢
  • 2011-02-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-01-13
  • 1970-01-01
  • 2014-01-03
  • 2015-09-21
  • 2010-11-26
相关资源
最近更新 更多