JS动态获取select中被选中的option的值，并在控制台输出

生活城市：
    <select id="province">
        <option>河南省</option>
        <option>黑龙江省</option>
        <option></option>
    </select> 

在script中获取被选中的option的值：

var province = document.querySelector("#province");

//select对象集合options返回包含下拉列表所有选项
//selectedIndex 代表的是你所选中项的index

var value = province.options[province.selectedIndex;].value;

在控制台输出被选中的option的值：

function output () {
　　//selectedIndex 代表的是你所选中项的index
　　var value = province.options[province.selectedIndex].value;
　　var index = province.selectedIndex;
　　console.log(value);
}
output();
province.addEventListener('change', output);

由于被选中的option的值是动态的，所以要把index 和 value定义在函数内部，让它们的值随着事件的发生而更新。

页面刚被渲染出来的时候，我们没有点击select选项，但它会有一个默认值，所以我们要在事件被触发前，执行一次函数。

把多次使用的函数进行封装可以减少代码的冗余。

本人前端新手一枚，如果哪里写的不对，欢迎在评论区留言！