Javascript / Jquery帮助-从选择菜单调用函数

Javascript / Jquery Help - Calling functions from select menu

本文关键字：选择 菜单 调用 函数 Jquery 帮助 Javascript      更新时间：2023-09-26

我需要一些帮助添加交互性到这个页面。我是jQuery的新手，这个东西可能很简单，但它已经把我逼疯了!

它只是一个足球队，不同的球员的详细信息存储在一个名为Squad_list数组中的对象中 Squad_List.js 

var squad = [
  {
  number: 1,
  pic: 'img/HIBBERD_M_t.png',
  name: 'Michael',
  surname: 'Hibberd',
  height: '186 cm',
  weight: '86 kg',
  debut: 2011,
  position: ['defender'],
  games: 85,
  goals: 11  
  },
  {
  number: 2,
  pic: 'img/BELLCHAMBERS_T_t.png',
  name: 'Tom',
  surname: 'Bellchambers',
  height: '202 cm',
  weight: '106 kg',
  debut: 2008,
  position: ['ruck'],
  games: 79,
  goals: 53  
  },
  {
  number: 3,
  pic: 'img/CHAPMAN_P_t.png',
  name: 'Paul',
  surname: 'Chapman',
  height: '179 cm',
  weight: '87 kg',
  debut: 2000,
  position: ['foward'],
  games: 280,
  goals: 366,
  goals15: 8  
  },
];

等等

我有不同的函数来创建一个listQuery从中队列表基于不同的位置，比赛等addListDefender创建一个列表的球员的位置=后卫

我有一个drawtable函数将信息写入页面

我有一个选择菜单来选择不同的listQuery选项，以相关的listQuery函数命名的值，它应该调用

App.js 

var listQuery = [];

// Draw table from 'listQuery' array of objects
function drawTable(tbody) {
    var tr, td;
    tbody = document.getElementById(tbody);
    // loop through data source
    //    document.write(tbody);
    for (var i = 0; i < listQuery.length; i++) {
        tr = tbody.insertRow(tbody.rows.length);
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("align", "center");
        td.innerHTML = "<p>" + listQuery[i].number + "</p>";
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = '<img src="' + listQuery[i].pic + '">';
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = listQuery[i].name + " " + listQuery[i].surname;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = listQuery[i].height;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = listQuery[i].weight;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = listQuery[i].debut;
        td = tr.insertCell(tr.cells.length);
        if  (listQuery[i].position.length > 1) { 
          td.innerHTML += listQuery[i].position[0] + " / " + listQuery[i].position[1]; 
          }  else {
          td.innerHTML += listQuery[i].position;
        }    
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = listQuery[i].games;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = listQuery[i].goals;
        td = tr.insertCell(tr.cells.length);
}
}

//Display entire list
var displayList = function() {
    listQuery = squad;
};

//Take players from list that position = foward
var addListFoward = function() {
  for (i = 0; i < squad.length; i++) {
    if (squad[i].position.indexOf("foward") >= 0) {
      listQuery.push(squad[i]);
      console.log(squad[i]);
    }  
  }
}

//Take players from list whose position = defender
var addListDefender = function() {
  for (i = 0; i < squad.length; i++) {
    if (squad[i].position === "defender") {
      listQuery.push(squad[i]);
      console.log(squad[i]);
    }
  }
}
//Take 10 items from player list in order of most games
var addListGames = function () {
  squad.sort(function(a, b){
     return b.games-a.games
  })
  listQuery = squad;
  listQuery.length = 10;
 }
// Site starts with Display Entire List
displayList();
drawTable("output");
//Generate list query on change select button from select options value
$('#select').change(function() {

});
//display selection from select button onclick go button
$('#go').click(function() {
//  alert("go has been click!");  
   drawTable("output");
});

基本上，当选择菜单被改变时，我想调用一个等于选择值的函数，然后用go按钮.....重新绘制表但是我在$('#select')和$('#go')上尝试的各种东西都不起作用。

任何帮助非常感激!!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta cahrset="UTF-8">
  <title>Bombers Squad</title>
  <link rel="stylesheet" href="css/styles.css">  
</head>
<body>
<div class="header">
  <div class="main-title">
    <h1>Bombers Squad</h1>
  </div>
  <div class="logo">
    <img src="img/logo-2x.png" alt="Bombers logo">
  </div>
</div>
<div class="main-field">
  <form>
  <label for="select">View Bombers Squad:</label>
  <select id="select" name="bombers_list">
    <option value="displayList">Display Entire List</option>
    <option value="addListFoward">Display Fowards</option>
    <option value="addListMidfield">Display Midfielders</option>
    <option value="addListDefender">Display Defenders</option>
    <option value="addListRuck">Display Rucks</option>
    <option value="addListGames">Display Most Games</option>
    <option value="addGoals2015">2015 Goal kickers</option>
    <option value="addBF2015">2015 Best & Fairest Votes</option>    
  </select>  
  <button id="go" type="submit">Go</button> 
  </form>  
  <table id="players">
    <caption>Player Information</caption>
    <thead>
      <tr>
        <th scope="col">Number</th>
        <th scope="col">Picture</th>
        <th scope="col">Name</th>      
        <th scope="col">Height</th>   
        <th scope="col">Weight</th>   
        <th scope="col">Debut</th>   
        <th scope="col">Position</th>   
        <th scope="col">Games</th>  
        <th scope="col">Goals</th> 
      </tr>
    </thead>
    <tbody id="output">
    </tbody>
  </table>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>  
<script src="js/squad_list.js"></script>
<script src="js/app.js"></script>    
</body>
</html>

JsFidder

似乎你只是忘记包括jquery或没有正确引用

查看下面的答案&工作演示

或者直接添加

$(function(){
$('#select').change(function () {

});
//display selection from select button onclick go button
$('#go').click(function () {
      alert("go has been click!");  
    drawTable("output");
});
})
相关文章：