从下拉列表中选择内容时更改 <p> 和 <h> 元素

Question

我有 2 个下拉菜单。一份针对地区，一份针对类别。当我都选择了它时，它会显示一个 div，其中我使用 chart.js 创建了一个图表。图表下方有一个类别元素和 <p> 数字元素。

例如：我选择 Munich 和 Einnahmen（利润），它会显示 Munich 图表，我希望它在下面列出“Einnahmen”和数字（稍后我将从数据库中获取）。但是如何动态更改这两个？

$(document).ready(function() {
  $('.boxy').hide();
  $("#selectField1, #selectField2").on("change", function() {
    $('.boxy').hide();
    $('#' + $('#selectField1').val() + $('#selectField2').val()).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectField1" class="form-control-sm">
  <option value='hannover'>Hannover</option>
  <option value='munich'>München</option>
</select>
<select id="selectField2" class="form-group form-control-sm">
  <option value='einnahmen'>Einnahmen</option>
  <option value='registrierungen'>Registrierungen</option>
  <option value='kunden'>Kunden</option>
</select>



<div class="card-body ">
  <div id="gesamteinnahmen" class="boxy"><canvas id="gesamtChart"></canvas> </div>
  <div id="hannovereinnahmen" class="boxy"><canvas id="hannoverChart"></canvas></div>
</div>
<div class=" card-footer d-flex flex-wrap bg-c-blue order-card p-0">
  <div class="col-12 px-0">
    <div class="text-center p-4">
      <h4>342</h4> // --------------------- SHOULD CHANGE 1
      <p class="mt-2">Kunden</p> // --------SHOULD CHANGE 2
    </div>
  </div>

Answer 1

我认为这段代码应该适合你

var menu1 = document.getElementById('selectField1');
var menu2 = document.getElementById('selectField2');
var value1= document.getElementById('value1');
var value2= document.getElementById('value2');

menu1.setAttribute("onchange","setValue1()");
menu2.setAttribute("onchange","setValue2()");

function setValue1() {
    value1.innerHTML = menu1.value;
}
function setValue2() {
    value2.innerHTML = menu2.value;
}

<!-- HTML CODE -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <select id="selectField1" class="form-control-sm">
      <option value='hannover'>Hannover</option>
      <option value='munich'>München</option>
    </select>
    <select id="selectField2" class="form-group form-control-sm">
      <option value='einnahmen'>Einnahmen</option>
      <option value='registrierungen'>Registrierungen</option>
      <option value='kunden'>Kunden</option>
    </select>
    <div class="card-body ">
      <div id="gesamteinnahmen" class="boxy"><canvas id="gesamtChart"></canvas> </div>
      <div id="hannovereinnahmen" class="boxy"><canvas id="hannoverChart"></canvas></div>
    </div>
    <div class=" card-footer d-flex flex-wrap bg-c-blue order-card p-0">
      <div class="col-12 px-0">
        <div class="text-center p-4">
          <h4 id="value1">342</h4> // --------------------- SHOULD CHANGE 1
          <p class="mt-2" id="value2">Kunden</p> // --------SHOULD CHANGE 2
        </div>
      </div>
    </div>
</body>

我在这里更新了您的 java 脚本代码和 html 代码，将 id 添加到 <h4> 和 <p> 标签以及设置属性 onchange 到 select.

从下拉列表中选择内容时更改 <p> 和 <h> 元素

Change <p> and <h> element when selecting something from dropdown

html

javascript

canvas

chart.js