Question

I’m trying to find the best way to display text corresponding to specific options in a select widget. I’m thinking I can just populate multiple divs with text, each div corresponding to an option in a select widget and initially setting them them with “display: none”. Then with Jquery I would unset a specific div to “display: none”, depending on which option is selected. However, I’m new to Jquery and am not sure where to start. Can someone point me in the right direction and/or give me suggestions on a better way to do this?

Answer 1

I usually solve the problem like this

<select id="select">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div class="my-div-class" id="my-div-id-1">blah 1</div>
<div class="my-div-class" id="my-div-id-2">blah 2</div>
<div class="my-div-class" id="my-div-id-3">blah 3</div>

And then I’ll have this piece of jquery code execute

$('#select').change(function() {
  $('.my-div-class:visible').hide();
  $('#my-div-id-' + $('#select').val()).show();
});

These are just examples. You can generalise as much as you like…