JQuery / JavaScript - Hide / Show drop-down list on radio button

advertisements

I want to make it so that the drop-down is only displayed when the radio button (option 3) is clicked and have it hidden if either 1 or 2 is selected. What would be the best way to complete this? I have a little bit of experience with JavaScript and slim to none with jQuery but it seemed like it might be the way to go.

Thanks for any help, Dan

Here is the HTML code I have as of now:

<p class="help">Selection:</p>

<div id='buttons'>
  <label><input type="radio" name="select" /> Option 1 </label>
  <label><input type="radio" name="select" /> Option 2</label>
  <label><input type="radio" name="select" /> Option 3</label>
</div>
<div id="list" style="display: none;">
  <label>Please Select From the List:
    <select>
      <option>True</option>
      <option>False</option>
    </select>
  </label>
</div>


$(document).ready(function(){
  $("[name=select]").change(function(){  // Whenever the radio buttons change
    $("#list").toggle($("[name=select]").index(this)===2);  // Only keep the list open when it's the last option (First option = 0, Third option = 2)
  });
});

This code in action.