jQuery select to make HTML DIV visable

Question

The HTML:

 <select name="reports" id="sr"> <option value="">Select Report...</option> <option value="avg" class="1">Average Sold</option> <option value="mma" class="1">Min|Max|Avg Sold</option> <option value="oh" class="2">On Hand Qty</option> <option value="mr" class="2">Money Report</option> </select> <div id='1' class='box box-primary'> <p>Start Date: <input type="text" id="datepicker" name="startdate" ></p> <p>End Date: <input type="text" id="datepicker2" name="enddate"></p><input name="submit" type="submit"/> </div> 

The jQuery:

 $(document).ready(function () { $('#1').hide(); $('#sr').change(function () { $('#'+$(this).val()).show(); }); }); 

I am trying to get this to function where when the avg or min, max, avg reports are selected in the select box, the DIV to enter the dates will become visible.

As of right now the page loads with the DIV hidden but it never become visible. Thanks in advance.

Answer 1

You need to look at the accepted option, you can not use the value like you are doing.

 $(document).ready(function () { $('.region').hide(); $('#sr').change(function () { $(".region").hide(); var region = $(this).find("option:selected").data("region"); $('#'+region).show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select name="reports" id="sr"> <option value="">Select Report...</option> <option value="avg" data-region="1">Average Sold</option> <option value="mma" data-region="1">Min|Max|Avg Sold</option> <option value="oh" data-region="2">On Hand Qty</option> <option value="mr" data-region="2">Money Report</option> </select> <div id='1' class='region box box-primary'> <p>Start Date: <input type="text" id="datepicker" name="startdate" ></p> <p>End Date: <input type="text" id="datepicker2" name="enddate"></p><input name="submit" type="submit"/> </div> <div id='2' class='region'> 2 </div>