如何从下拉菜单中读取值并使用 javascript 将其带到 IF 语句？

Question

我正在使用 html 和 javascript。我想做一个简单的table，我在其中引入团队数量作为输入并显示玩家数量。

如果运动 = 篮球和城市 = 巴黎，则球员人数应 = 5 * 球队人数
对于任何其他选项，玩家数量应 = 10 * 团队数量

我做的步骤：

创建 table
创建函数以获取下拉菜单的值并计算常量是 5 还是 10
创建一个函数来进行计算。

有人可以帮忙吗？非常感谢

//<!-- SCRIPT TO MULTIPLY FOR EF -->
function getValue()
{
  var selectedValue1 = document.getElementById("sector").value;
  var selectedValue2 = document.getElementById("city").value;

  if(selectedValue1=='s3' && selectedValue2=='c3'){
    EF = 5;
  }else{
    EF= 10;
  }

}

//<!-- SCRIPT TO CALCULATE THE FACTOR -->
var teams = document.getElementById('teams');
var players = document.getElementById('player');

function calculate(){
  players.value = Number(teams.value)*EF;
}

var inputElement = document.getElementById('players');
inputElement.addEventListener('change', calculate);

<html>
  <body>

    <table class="egt">


      <!-- LINE -->

      <tr>    
          <th>Sector</th>
          <th>Number of teams</th>
          <th>City</th>
          <th>Number of players</th>
      </tr>

      <!-- LINE -->   

      <tr>    

          <td>
          <select id="sector"> 
          <option value="s1">Volley</option> 
          <option value="s2">Football</option>
          <option value="s3">Basketball</option>
          <option value="s4">Handball</option>
          </select>
          </td>


          <td>
              <input type="number" id="teams"> 
          </td>  

          <td>
          <select name="city"> <!-- List -->
          <option value="c1">Madrid</option> <!-- opciones -->
          <option value="c2">Belgium</option>
          <option value="c3">Paris</option>
          </select>
          </td>


          <td>
          <input type="number" id="players">
          </td>


      </tr>



    </table>

    <!-- FINAL TABLA -->
  </body>
</html>

由于某种原因，它不起作用。

Answer 1

有很多小错误。请找到这个codepan

Codepan

function getValue()
   {
   var selectedValue1 = document.getElementById("sector").value;
   var selectedValue2 = document.getElementById("city").value;
    if(selectedValue1=='s3' && selectedValue2=='c3'){
    EF = 5;
    }else{
    EF= 10;
    }
}
 






var teams = document.getElementById('teams');
var players = document.getElementById('players');
function calculate(){
  getValue();
players.value = Number(teams.value)*EF;
}
var inputElement = document.getElementById('teams');
inputElement.addEventListener('change', calculate);
var sector = document.getElementById('sector');
sector.addEventListener('change', calculate);
var city = document.getElementById('city');
city.addEventListener('change', calculate);

此外，我添加了多个侦听器，因此它可能对您有所帮助。

Answer 2

您需要将 eventListener 放入所有将影响计算的字段。正如您在 OP 中提到的那样，我已将 eventListener 添加到作为计算一部分的字段中。

function getValue() {
  var selectedValue1 = document.getElementById("sector").value;
  var selectedValue2 = document.getElementById("city").value;

  if (selectedValue1 == 's3' && selectedValue2 == 'c3') {
    return 5;
  } else {
    return 10;
  }

}


var teams = document.getElementById('teams');
teams.addEventListener('change', calculate);
var sector = document.getElementById('sector');
sector.addEventListener('change', calculate);

var sector = document.getElementById('city');
sector.addEventListener('change', calculate);

function calculate() {

  let teams = document.getElementById('teams');
  let EF = getValue();
  players.value = Number(teams.value) * EF;
}

<table class="egt">


  <!-- LINE -->

  <tr>
    <th>Sector</th>
    <th>Number of teams</th>
    <th>City</th>
    <th>Number of players</th>
  </tr>

  <!-- LINE -->

  <tr>

    <td>
      <select id="sector">
        <option value="s1">Volley</option>
        <option value="s2">Football</option>
        <option value="s3">Basketball</option>
        <option value="s4">Handball</option>
      </select>
    </td>


    <td>
      <input type="number" id="teams">
    </td>

    <td>
      <select name="city" id="city">
        <!-- List -->
        <option value="c1">Madrid</option>
        <!-- opciones -->
        <option value="c2">Belgium</option>
        <option value="c3">Paris</option>
      </select>
    </td>


    <td>
      <input type="number" id="players">
    </td>


  </tr>



</table>

<!-- FINAL TABLA -->



<!-- SCRIPT TO CALCULATE THE FACTOR -->

Answer 3

您也可以通过 JQuery...

实现此目的

<table class="egt">
<! LINE -->
<tr>    
    <th>Sector</th>
    <th>City</th>
    <th>Number of teams</th>
    <th>Number of players</th>
</tr>
<! LINE -->   
<tr>
    <td>
    <select id="sector"> 
    <option value="s1">Volley</option> 
    <option value="s2">Football</option>
    <option value="s3">Basketball</option>
    <option value="s4">Handball</option>
    </select>
    </td>
    <td>
    <select name="city"> <!-- List -->
    <option value="c1">Madrid</option> <!-- opciones -->
    <option value="c2">Belgium</option>
    <option value="c3">Paris</option>
    </select>
    </td>
    <td>
        <input type="number" id="teams"> 
    </td>
    <td>
      <input type="number" id="players" readonly>
    </td>
</tr>
</table>
<! --FINAL TABLA -->

$(document).ready(function()
{

  $("select").change(function(){
  var sector = $("#sector option:selected").text();
  var city = $("#city option:selected").text();
  function numberofPlayers()
    {
    var teams = parseFloat($("#teams").val());
    if(sector != "Basketball" && city != "Paris"){
      var players = (teams) * 10;
      $("#players").val(players);
    }else{
      var players = (teams) * 5;
      $("#players").val(players);
      }
      }
    $(document).on("keyup", "#teams", numberofPlayers);
  });


})

为了演示，这里是 jsfiddle 的 link； https://jsfiddle.net/sz3poy95/1/

如何从下拉菜单中读取值并使用 javascript 将其带到 IF 语句？

how can I read the values from drop down menu and bring to IF statement with javascript?

html

javascript

drop-down-menu