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

我正在使用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();
        }
    });
});

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

$(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();
        }
    });
});

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

HTML代码：

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

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

$(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();
        }
    });
});

<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
区域2
区域3
区域4
未定义区域

您的代码应该是

JavaScript:

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

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

$(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();
        }
    });
});

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

HTML代码：

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

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

$(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();
        }
    });
});

<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
区域2
区域3
区域4
未定义区域

更改此$（'div:not（#chart'+val+'））。slideUp（）$（“#图表”+val）.slideDown（）；它部分起作用，问题是：1。当未选择任何区域时，它将显示所有5个图形…它不应显示任何图形2。当我们选择一个选项时，它显示的图形没有标题，也没有axes.do$（'div'）.slideDown（）的值和lebel；到$（'div'）。slideup（）；在其他方面，它部分起作用，问题是：1。当未选择任何区域时，它将显示所有5个图形…它不应显示任何图形2。当我们选择一个选项时，它显示的图形没有标题，也没有轴的值和lebel。3.当我选择区域4时，它显示区域3的图形，区域4的图形从不显示。4.此外，当我选择第5个选项“未定义区域”时，它显示区域3的图形。更改else语句不会产生任何差异，尽管已解决问题3和问题4…………最后3个标记的选项值错误为3。现在我们只剩下前两个问题了