下拉菜单更改上的动态说明 div

Question

嗨，伙计们，我对javascript很陌生，我正在使用一个图表.js图表，该图表基于下拉按钮自行更新。我还想更新另一个称为解释的div，它在图表上发表评论。

gogo 是一个列出 explantation id.log.console(gogo( 可以输出 [15， 16] 或 [15， 16， 17， 18] 的对象。我需要为每个解释 id 在解释div 中创建一个新的div

我试过了：

$(".pick-chart").change(function(e) {
    e.preventDefault();
    var val = $(this).val();
    if (val != 0) {
                info_process.data.datasets[1].data = info_array[val];
                info_process.update();
                stringval = JSON.stringify(val)
                gogo = opposed_model[val]
                for(var x = 0; x < gogo.length; x++){
                  $("#explanation").append("<b>gogo[x]</b>");
                }
                document.getElementById('explanation').innerHTML = gogo;
            } else {
        info_process.data.datasets[1].data = [];
        document.getElementById('explanation').innerHTML = "";
    }
    info_process.update();
});

.HTML：

<div class="col">
          <div class="card box-shad">
            <h5 class="card-header text-center bg-dark text-white">Action</h5>
            <div class="card-body">
              Text - Test
              <div id="explanation">
              </div>
            </div>
        </div>
      </div>

我无法让它工作，任何想法？

Answer 1

您遇到的几个问题：

1. 而不是$("#explanation").append("<b>gogo[x]</b>");做$("#explanation").append("<b>"+gogo[x]+"</b>");.请注意字符串串联发生的方式。

2. 删除document.getElementById('explanation').innerHTML = gogo;这将覆盖 #explanation 的 html。