如何在 javascript 中獲取多個下拉菜單中的選定選項

Question

我的頁面上有多個下拉菜單，我希望每個下拉菜單的選定選項都使用它們的名稱。

我試過這個方法但沒有成功

<select name="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

<select name="ddlViewBy">
  <option value="1" selected="selected">test1</option>
  <option value="2" >test2</option>
  <option value="3">test3</option>
</select>

var e = document.getElementsByName("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;

https://jsfiddle.net/37zg8u5L/1/

Answer 1

如果您要按名稱而不是 ID 來引用元素，則可以使用下面的代碼。 但請記住，元素必須具有相同的名稱（這可能會造成混淆），並且您必須記住要引用的每個元素的索引，因此我強烈建議您改為分配 ID。 由於您引用了多個元素，因此將返回一個元素數組而不是一個元素，這就是您的代碼中斷的原因。

 var e1 = document.getElementsByName("ddlViewBy")[0]; var e2 = document.getElementsByName("ddlViewBy")[1]; var strUser = e1.options[e1.selectedIndex].text; var strUser2 = e2.options[e2.selectedIndex].text; console.log(strUser); console.log(strUser2);

 <select name="ddlViewBy"> <option value="1">test1</option> <option value="2" selected="selected">test2</option> <option value="3">test3</option> </select> <select name="ddlViewBy"> <option value="1" selected="selected">test1</option> <option value="2" >test2</option> <option value="3">test3</option> </select>