Выбор одной диаграммы за раз с помощью выпадающего списка

Question

Я использую javascript и jqplot для построения нескольких диаграмм на основе данных моего файла JSON. Я смог это сделать, но теперь хочу разместить раскрывающийся список, который должен быть связан с моим контейнером диаграммы. Значение, выбрав конкретную опцию, отобразит только диаграмму для этого контейнера. Мой код показан ниже. Здесь я хочу показать, например, только «chart1», когда я выбираю «area1». Может ли кто-нибудь помочь мне в этом. Мой код также содержит функцию js для выбора конкретной диаграммы, но когда я выбираю область1, все диаграммы скрываются и одинаковы для всех параметров. Мой код, как показано ниже:

JavaScript:

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

HTML код:

<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 код:

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