时间戳

首页 > 解决方案 > 在 HTML Select 值更改时更新 JavaScript 变量

javascript - 在 HTML Select 值更改时更新 JavaScript 变量

问题描述

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

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

如果不可能，我很想听听其他的选择。

这是 HTML -->

<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-->

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);

标签： javascripthtml

解决方案

尝试使用 HTML5data-属性将值映射到级别：

选项 1：使用 JS

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();
<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>

选项 2：使用 jQuery

$(function() {
  $('#nivel').on('change', function() {
    $('#lvl').text('Level: ' + $(this).find('option:selected').data('level'));
  }).trigger('change');
});
<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>

推荐阅读