Question

我的网页上有大约20个div部分。但选择 1 然后 2 后， 1 的图表保持显示。有关如何调整js以使图表显示的任何想法，只要我更改列表中的选择？我需要什么技术？

HTML

<select id='selectchart'>
  <option value="0">Sales of Jan</option>
  <option value="1">Sales of Feb</option>
  <option value="2">Sales of Mar</option>
</select>

<div style='display:block; width:600px;' id='chart1'></div>
<div style='display:none; width:600px;' id='chart2'></div>

js（这里的代码只是演示打开图表但不会消失其他取消选择的图表。谢谢

$(document).ready(function(){
    $('#selectchart').on('change', function() {
      if ( this.value == '1')
      {
        $("#chart1").show();
      }
      else if (this.value =='2')
      {
        $("#chart2").show();
      }
      else
      {
        $("#chart3").show();
      }
    });
});

Answer 1

试试这个。我也让你的功能更有活力

＆＃13;

$(document).ready(function() {
  $('#selectchart').on('change', function() {
    $('div[id^="chart"]').hide()
    $("#chart" + this.value).show();
    if(this.value == 0) {$("#chart1").show();}
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='selectchart'>
  <option value="0">Sales of Jan</option>
  <option value="1">Sales of Feb</option>
  <option value="2">Sales of Mar</option>
  <option value="3">Sales of Apr</option>
  <option value="4">Sales of May</option>
</select>

<div style='display:block; width:600px;' id='chart1'>chart1</div>
<div style='display:none; width:600px;' id='chart2'>chart2</div>
<div style='display:none; width:600px;' id='chart3'>chart3</div>
<div style='display:none; width:600px;' id='chart4'>chart4</div>

＆＃13;

Answer 2

我能想到的简单方法是让所有图表都是同一类。

 <select id='selectchart'>
  <option value="0">Sales of Jan</option>
  <option value="1">Sales of Feb</option>
  <option value="2">Sales of Mar</option>
</select>
<div style='display:block; width:600px;' id='chart0' class="chart">ccccbbb</div>
<div style='display:none; width:600px;' id='chart1' class="chart">aaa</div>
<div style='display:none; width:600px;' id='chart2' class="chart">bbb</div>

然后使用jquery隐藏类chart并显示当前图表。

$(document).ready(function(){
    $('#selectchart').on('change', function() {
      $(".chart").hide();
      $("#chart"+this.value).show();
    });
});

对于更改大小的问题，只需为图表设置固定大小。

<script type="text/javascript">
    //pie chart    
    function drawPie() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['AA', 5],
      ['BB',  0],
      ['CC',  6],
      ['DD',  7],
      ['GG',  8],
    ]);

    var options = {
      title: 'My Daily Activities01',
      height: 200, //Fix the size
      width: 400 //Fix the size
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart0'));

    chart.draw(data, options);
    }
</script>

JS fiddle

选择列表以在<div>

2 个答案: