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

【问题标题】：Change and <h> element when selecting something from dropdown从下拉列表中选择内容时更改 和 <h> 元素
【发布时间】：2021-07-26 11:22:05
【问题描述】：

我有 2 个下拉菜单。一个用于地区，一个用于类别。当我同时选择它时，它会向我显示一个 div，它位于我使用 chart.js 创建的图形所在的位置。图表下方有一个用于类别的元素和一个用于数字的 元素。

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

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

【问题讨论】：

在您的更改处理程序中，添加console.log('#' + $('#selectField1').val() + $('#selectField2').val()); ... 现在，您能看到使用该选择器选择的任何元素吗？ ... 甚至试图以h4 和p 元素为目标？他们没有id，但您的选择器是#municheinnahmen 或#munichregistrierungen 等
这是选择图形的代码。我要求一种方法将它与同时选择 h4 和 p 元素结合起来。
ebrowkin：我已将您的代码转换为（理论上）可运行的代码段，以便我们可以用您的代码重现您描述的问题。您能否链接到您正在使用的相应插件，以使其更准确地重现您的情况？

标签： javascript html canvas chart.js

【解决方案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>

在这里，我通过将 id 添加到 <h4> 和  标记以及将属性 onchange 设置为 select 来稍微更新了您的 java 脚本代码和 html 代码。

【讨论】：