Question

我想在选择中列出一些amChart图表。它没有任何默认图表，所以我尝试设置＆lt; select＆gt;的默认值通过对其中一个选项使用所选属性，它会在选择框中选中，但不会显示在页面上。 var currentChart; function showChart（divid）{ if（currentChart！== undefined） currentChart.style.display =“none”; if（divid）{ currentChart = document.getElementById（divid）; currentChart.style.display =“block”; } 其他{ currentChart = undefined; } } ＆lt; select onchange =“showChart（this.options [this.selectedIndex] .value）;”＆gt; ＆lt; option value =“”＆gt;选择要显示的图表＆lt; / option＆gt; ＆lt; option value =“chart1”selected＆gt; Chart＃1＆lt; / option＆gt; ＆lt; option value =“chart2”＆gt;图表＃2＆lt; / option＆gt; ＆lt; option value =“chart3”＆gt;图表＃3＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt; div id =“chart1”class =“chartBoxSingle”style =“display：none;”＆gt; Chart 1＆lt; / div＆gt; ＆lt; div id =“chart2”class =“chartBoxSingle”style =“display：none;”＆gt; Chart 2＆lt; / div＆gt; ＆lt; div id =“chart3”class =“chartBoxSingle”style =“display：none;”＆gt; Chart 3＆lt; / div＆gt;

Answer 1

您只能为标签使用onload事件

 <body>, <frame>, <iframe>, <img>, <input type="image">, <link>,
 <script>, <style>

您可以通过两种方式完成其他元素

插入脚本标签封闭函数，对元素后面元素的onload执行或
使用jquery

$（document）.ready（function（）{showChart（＆＃39; chart1＆＃39;）;}）;

＆＃13;

<script>
  var currentChart;

  function showChart(divid) {
    if (currentChart !== undefined)
      currentChart.style.display = "none";
    if (divid) {
      currentChart = document.getElementById(divid);
      currentChart.style.display = "block";
    } else {
      currentChart = undefined;
    }
  }
</script>
<select onchange="showChart(this.options[this.selectedIndex].value);">
      <option value="">Select the chart to show</option>
      <option value="chart1" selected>Chart #1</option>
      <option value="chart2">Chart #2</option>
      <option value="chart3">Chart #3</option>
    </select>

<div id="chart1" class="chartBoxSingle" style="display: none;">char1</div>
<div id="chart2" class="chartBoxSingle" style="display: none;">char2</div>
<div id="chart3" class="chartBoxSingle" style="display: none;">char3</div>
<script type="text/javascript">
  showChart('chart1');
</script>

＆＃13;

Answer 2

尝试在窗口加载时显式调用所需的选项。

$(document).ready(function(){
   showChart("chart2");
});

$("#comboBoxID").change(function(e){
   showChart($(this).val());
});

var currentChart;

function showChart(divId){    
  if (currentChart !== undefined)
    currentChart.hide();
  if (divId) {
    currentChart = $("#"+divId);
    currentChart.show();
  }
  else {
    currentChart = undefined;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="comboBoxID">
   <option value="none">None</option>
   <option value="chart1">Chart 1</option>
   <option value="chart2" selected>Chart 2</option>
   <option value="chart3">Chart 3</option>
</select>

<div id="chart1" class="chartBoxSingle" style="display: none;">Chart 1</div>
<div id="chart2" class="chartBoxSingle" style="display: none;">Chart 2</div>
<div id="chart3" class="chartBoxSingle" style="display: none;">Chart 3</div>

使用jQuery时，Html <select> selected属性无法正常工作

2 个答案: