使用 JavaScript 获取下拉列表中的选定值

如何使用 JavaScript 从下拉列表中获取选定的值?

我尝试了以下方法,但它们都返回选定的索引而不是值:

var e = document.getElementById("ddlViewBy");
function show(){
  var as = document.forms[0].ddlViewBy.value;
  var strUser = e.options[e.selectedIndex].value;
  console.log(as, strUser);
}
e.onchange=show;
show();
<form>
  <select id="ddlViewBy">
    <option value="1">test1</option>
    <option value="2" selected="selected">test2</option>
    <option value="3">test3</option>
  </select>
</form>
var selectedValue = document.getElementById("ddlViewBy").value;
<select id="Ultra" onchange="alert(this.value)"> 
 <option value="0">Select</option>
 <option value="8">text1</option>
 <option value="5">text2</option>
 <option value="4">text3</option>
</select>

Any input/form field can use a “this” keyword when you are accessing it from inside the element. This eliminates the need for locating a form in the dom tree and then locating this element inside the form.

Beginners are likely to want to access values from a select with the NAME attribute rather than ID attribute. We know all form elements need names, even before they get ids.

So, I'm adding the getElementsByName() solution just for new developers to see too.

NB. names for form elements will need to be unique for your form to be usable once posted, but the DOM can allow a name be shared by more than one element. For that reason consider adding IDs to forms if you can, or be explicit with form element names my_nth_select_named_x and my_nth_text_input_named_y.

Example using getElementsByName:

var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];
var strUser = e.options[e.selectedIndex].value;

You can use querySelector.

E.g.

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector(‘[selected]’).value;

</div>