下拉列表如何获取选中option的值

对于无序列表ul，我们可以早ul元素上注册click事件，通过event.target来获取到当前点击的列表项，示例代码如下：

<ul id='list'>
	<li>1li>
	<li>2li>
	<li>3li>
ul>

//js代码部分
var myList = document.getElementById('list');

myList.onclick = function (event) {	
	console.log(event.target);
}

那么对于select下拉列表可不可以用同样的方式来获取选中的option呢？答案是不可以的，不信你可以试一下。那有什么其他的解决办法嘛？是的，别急。首先，我们知道select上可以绑定change事件，该事件在切换不同的option时会触发，但是访问当前event对象的target时，却得不到我们想要的结果，但是我们可以通过mySelect.options[mySelect.selectedIndex]来获取当前选中的元素，将其与change事件结合使用，就可以获得选中option的值啦，下面是代码示例：

<select id='sel'>
	<option value='a'>1option>
	<option value='b'>2option>
	<option value='c'>3option>
select>

//js代码部分
  var mySelect = document.getElementById('sel');    
          
  mySelect.onchange = function () {                
  console.log('当前选中的选项的value值:' + mySelect.options[mySelect.selectedIndex].value);                
  console.log('当前选中的选项的text值:' + mySelect.options[mySelect.selectedIndex].innerText);         
}

这样就可以顺利获取到选中option的值啦，不过这个写法还是有一个小bug，当你首次打开页面，并在下拉菜单中选中第一项时，是没有任何反应的，因为select列表默认第一个option就是选中状态，因此再次选中它，并不会触发change事件，大家有更好的办法可以评论，交流