在我的情况下，如何在 <select> 中获取所选选项的 ID？

Posted 2023-05-09

【中文标题】在我的情况下，如何在 <select> 中获取所选选项的 ID？

【英文标题】：How to get the id of selected option in <select> in my case?

【发布时间】：2011-08-10 01:40:48

【问题描述】：

我在 index.html 中有一个 字段和一个按钮：

<select id="mylist"></select>

<input type="button" id="btn" value="update">

以下Javascript会在点击按钮时更新字段的options：

var btn=$('#btn');
btn.click(function()
     var optionList = GET_OBJECT_LIST(); //get an array of Object, object has id & name
     var select  = $("#mylist");

     select.empty();

     for(var i=0; i<optionList.length; i++)
       select.append("<option value=" + optionList[i].id+ ">" + optionList[i].name + "</option>");
     

);

到目前为止一切都很好。

然后，我想实现在options更新后，当鼠标点击<select>字段中的选项时，我可以获得对象id（即<option> 值）所选选项。怎么做？

【问题讨论】：

id 不是value。它们是不同的属性。

@Blender，如果你仔细检查我的帖子，这里的 id 是 object.id，我想获取所选选项的对象 id，在我的情况下代表一个对象。我故意使用 。我需要的是在鼠标单击某个选项时获取此 object.id。

【参考方案1】：

这可能有效（不确定它是否返回一个数组，所以你会发现）：

$('#mylist').change(function() 
  var selected = $(this).find('option:selected');

  // Foo.
);

【讨论】：

您好，我可以通过访问“selected[0].value”来获取选中的选项值（即object.id），但是这个0是什么意思呢？

[0] 是数组索引。您可以选择多个项目，因此它们将在数组中聚合。如果您愿意，可以使用.find('option:selected:eq(0)');，因为它会选择第一个选定的项目。

【参考方案2】：

我想出使用以下完全符合我想要的代码：

$('#mylist').change(function() 
  var selected_object_id = $(this).find('option:selected').attr('value');
  console.log(selected_object_id); //it directly returns to me the selected option represented object id
);