使用js从下拉菜单中获取选定的值

Question

我在做什么错误？

var el = document.getElementById('option'); 
 
el.addEventListener('change', function() { 
 
    room() 
 
}, false); 
 
var roomOption = el.options[el.selectedIndex].value;

<select id="option"> 
 
    <option value = "1">Option 1</option> 
 
    <option value = "2">Option 2</option> 
 
    <option value = "3">Option 3</option> 
 
    <option value = "4">Option 4</option> 
 
    <option value = "5">Option 5</option> 
 
</select>

Answer 1

你的房间功能是不确定的。获得来自房间functoin选定值内

var el = document.getElementById('option'); 
 
el.addEventListener('change', function() { 
 
    room() 
 
}, false); 
 
function room(){ 
 
var roomOption = el.options[el.selectedIndex].value; 
 
console.log(roomOption) 
 
}

<select id="option"> 
 
      <option value = "1">Option 1</option> 
 
      <option value = "2">Option 2</option> 
 
      <option value = "3">Option 3</option> 
 
      <option value = "4">Option 4</option> 
 
      <option value = "5">Option 5</option> 
 
     </select>

Answer 2

你只需要创建的“房间”功能，您的代码将工作，作为片段。

var el = document.getElementById('option'); 
 
el.addEventListener('change', function() { 
 
    room() 
 
}, false); 
 
//var roomOption= el.options[el.selectedIndex].value; 
 

 
function room() { 
 
    var roomOption = el.options[el.selectedIndex].value; 
 
    console.log(roomOption); 
 
}

<select id="option"> 
 
      <option value = "1">Option 1</option> 
 
      <option value = "2">Option 2</option> 
 
      <option value = "3">Option 3</option> 
 
      <option value = "4">Option 4</option> 
 
      <option value = "5">Option 5</option> 
 
</select>

Answer 3

内部事件处理程序做到这一点

el.addEventListener('change', function(evt){ 
    var e = evt.target 
    var id = e[e.selectedIndex].value; // now use it as you like... 
    room(id); //invoke room with id 
}, false)