Show div based on drop down selection?

Show div based on drop down selection?

Hello all,

I have a drop down that is being dynamically generated, so it could have anywhere from 1 to 50 options. I'm having real trouble at that part. Each of those options, if they exist, will have a corresponding numeric div I need to show based on the selection. For example...

I've got the javascript to achieve this if the numbers are static, but Im not sure how to make this more dynamic or flexible so I can have a varying amount of numbers. Can anyone please help?



  1. $("#shipping_selector").change(function() {         
  2.     ($(this).val() == "1") ? $("#data_1").addClass("toggleShow") : $("#data_1").removeClass("toggleShow");
  3.     ($(this).val() == "3") ? $("#data_3").addClass("toggleShow") : $("#data_3").removeClass("toggleShow");
  4.     ($(this).val() == "6") ? $("#data_6").addClass("toggleShow") : $("#data_6").removeClass("toggleShow");     
  5. }); 

  6. <select name="existing_us_ID">
  7. <option value="1">One</option>
  8. <option value="3">Three</option>
  9. <option value="6">Six</option>
  10. </select>

  11. <div id="1">Div one</option>
  12. <div id="3">Div one</option>
  13. <div id="6">Div one</option>