Question

当HTML选择值的值发生变化时，我想在javascript中更新变量。

当我在浏览器中选择选项2或3时，级别变量仍显示选项1值（级别= 2）。

如果不可能，我很乐意听到其他一些选择。

这是HTML - ＆gt;

<select id="nivel">
        <option value="1">easy</option>
        <option value="2">medium</option>
        <option value="3">hard</option>
</select>
<p id="lvl">Level: </p>

这是js - ＆gt;

var level;
if(document.getElementById("nivel").value == "1"){
        level = 2;
    }
      else{
        if(document.getElementById("nivel").value == "2"){
            level = 5;
        }else{
            level = 9;
        }
      }
 document.getElementById("lvl").innerHTML=("Level: " +level);

Answer 1

只是一些改变？： - ＆gt;替换if .. else 检查此片段，我希望它会有所帮助

var level;
function updateLevel(event) {
  level = event.value;
  level = (level == '1') ? '2' : (level == '2') ? '5' : '9'; 
  document.getElementById("lvl").innerHTML = ("Level: " + level);
}

<select id="nivel" onchange="updateLevel(this)">
  <option value="">Select</option>
  <option value="1">easy</option>
  <option value="2">medium</option>
  <option value="3">hard</option>
</select>
<p id="lvl">Level: </p>

Answer 2

尝试使用HTML5 data-属性

来映射具有级别的值

选项1：使用JS

＆＃13;

var nivel = document.getElementById('nivel');
var lvl = document.getElementById('lvl');
nivel.onchange = function() {
  lvl.innerHTML = 'Level: ' + this.options[this.selectedIndex].getAttribute('data-level');
};
nivel.onchange();

＆＃13;

<select id="nivel">
  <option value="1" data-level="2">easy</option>
  <option value="2" data-level="5">medium</option>
  <option value="3" data-level="9">hard</option>
</select>
<p id="lvl"></p>

＆＃13;

选项2：使用jQuery

＆＃13;

$(function() {
  $('#nivel').on('change', function() {
    $('#lvl').text('Level: ' + $(this).find('option:selected').data('level'));
  }).trigger('change');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="nivel">
  <option value="1" data-level="2">easy</option>
  <option value="2" data-level="5">medium</option>
  <option value="3" data-level="9">hard</option>
</select>
<p id="lvl"></p>

＆＃13;

Answer 3

您的代码中存在多个问题：

您需要在change下拉列表中关联select事件
您在id条件下使用了不正确的if。它应该是nivel而不是lvl
在页面加载时调用changeLevel()函数，以便根据默认选择设置默认的level变量。

＆＃13;

function changeLevel(){
  var level;
  if(document.getElementById("nivel").value == "1"){
      level = 2;
  }
  else{
    if(document.getElementById("nivel").value == "2"){
        level = 5;
    } else{
        level = 9;
    }
  }
  document.getElementById("lvl").innerHTML=("Level: " +level);
}
changeLevel();

＆＃13;

<select id="nivel" onchange='changeLevel()'>
        <option value="1">easy</option>
        <option value="2">medium</option>
        <option value="3">hard</option>
</select>
<p id="lvl">Level: </p>

＆＃13;

更新HTML选择值更改时的JavaScript变量

3 个答案: