Question

我正在使用javascript和jqplot根据我的JSON文件中的数据绘制多个图表。我已经能够做到这一点，但现在我想要一个下拉列表，它应该与我的图表容器链接。这意味着，选择特定选项将仅显示该容器的图表。我的代码如下所示。在这里，我想在选择“area1”时仅显示“chart1”。任何人都可以帮助我实现这一目标。我的代码还包含一个用于选择特定图表的js函数，但是当我选择area1时，所有图表都隐藏，所有选项都相同。我的代码如下：

JavaScript的：

$(function() {
    $('select').change(function() {
        var val = $(this).val();
        if (val) {
            $('div:not(#div' + val + ')').slideUp();
            $('#div' + val).slideDown();
        } else {
            $('div').slideDown();
        }
    });
});

HTML code：

<select>
<option value="">Select an Area</option>
<option value="1">Area1</option>
<option value="2">Area2</option>
<option value="3">Area3</option>
<option value="3">Area4</option>
<option value="3">Not Defined Area</option>
</select>
<div id="chart1" style="height: 400px; width: 600px;"></div>
<div id="chart2" style="height: 400px; width: 600px;"></div>
<div id="chart3" style="height: 400px; width: 600px;"></div>
<div id="chart4" style="height: 400px; width: 600px;"></div>
<div id="chart5" style="height: 400px; width: 600px;"></div>

Answer 1

您的代码应为

<强> JavaScript的：

$(function() {
    $('select').change(function() {
        var val = $(this).val();
        if (val!="") {
            //change div with chart
            $('div:not(#chart' + val + ')').slideUp();
            //slide down selected one
            $('#chart' + val).slideDown();
        } else {
            $('div').slideUp();
        }
    });
});

HTML code：

<select>
<option value="">Select an Area</option>
<option value="1">Area1</option>
<option value="2">Area2</option>
<option value="3">Area3</option>
<option value="3">Area4</option>
<option value="3">Not Defined Area</option>
</select>
<div id="chart1"  style="height: 400px; width: 600px;"></div>
<div id="chart2"  style="height: 400px; width: 600px;"></div>
<div id="chart3"  style="height: 400px; width: 600px;"></div>
<div id="chart4"  style="height: 400px; width: 600px;"></div>
<div id="chart5"  style="height: 400px; width: 600px;"></div>

使用下拉列表一次选择一个图表

1 个答案: