在dropdownList中调用JS函数

问题描述

我已经编码了从JSON显示数据的函数，并且在下拉列表中有不同的函数，因此用户可以选择要查看的内容。

   <div class="ex-basic-2">
        <label for="Charts">Sort your Data:</label>

<select name="Charts" id="chartData_Chage" onchange="changeData(this)">
  <option value="1">Top 5 Countries - Heights Cases</option>
  <option value="2">Top 5 Countries - Heights Deaths</option>
  <option value="3">Top 5 Countries - Most Recovered</option>
  <option value="4">All Countries - Cases</option>
</select>
        <div class="container">
            <canvas id="chart" style="height: 400px ; width: 800px;"></canvas>
        </div> <!-- end of container -->
    </div>

JS：

var menu = document.getElementById("chartData_Chage")
menu.addEventListener("onchange",changeData)

function changeData(menu)
{
    if (menu.value == '1')
    {
        createBarChart()
    } 
    else if (menu.value == '2')
    {
        createBarChartMostDeaths()
    }
    else if (menu.value == '3')
    {
        createBarChartMostRecoverys()
    }

}

当我选择下拉框时，方法可以正常工作，但是当我将其移开并将鼠标悬停在栏聊天数据上时，数据会发生变化（不同的人会被调用）

有什么想法吗？

解决方法

您需要从选择项中删除onchange="changeData(this)"

也就是change不是onchange

您还可以使用this：

function changeData() { 
   if (this.value == '1') createBarChart(); 
   else if (this.value == '2') createBarChartMostDeaths()
...

const createBarChart = () => {
  console.log("create")
}
const createBarChartMostDeaths = () => {
  console.log("create most deaths")
}
const createBarChartMostRecoverys = () => {
  console.log("create most recoveries")
}


function changeData() {
  if (this.value == '1') {
    createBarChart()
  } else if (this.value == '2') {
    createBarChartMostDeaths()
  } else if (this.value == '3') {
    createBarChartMostRecoverys()
  }
}
window.addEventListener("load",function() {
  const menu = document.getElementById("chartData_Change")
  menu.addEventListener("change",changeData); // "change" not "onchange"
  menu.value=1;
  createBarChart()
})

<div class="ex-basic-2">
  <label for="Charts">Sort your Data:</label>

  <select name="Charts" id="chartData_Change">
    <option value="1">Top 5 Countries - Heights Cases</option>
    <option value="2">Top 5 Countries - Heights Deaths</option>
    <option value="3">Top 5 Countries - Most Recovered</option>
    <option value="4">All Countries - Cases</option>
  </select>
  <div class="container">
    <canvas id="chart" style="height: 400px ; width: 800px;"></canvas>
  </div>
  <!-- end of container -->
</div>

,

您只需要在select标签中设置事件，就像这样

<select id="sel" onchange='changeData(this)'>

这是一个完整的示例：（https://jsfiddle.net/eaxv0o12/）