title: Select dependent on Radio Button
body: <p>How can I make a <code>&lt;SELECT&gt;</code> visible if a particular <code>&lt;INPUT type="radio"&gt;</code> is selected?</p>
  
  <p>I have the following function at the end of <code>&lt;BODY&gt;</code>:</p>
  
  <pre><code>&lt;script&gt;
  $('[data-dependent]').each(function () {
      var $ele = $(this);
      var dependsOn = $ele.data('dependent');
      $.each(dependsOn, function (target, value) {
          $(target).on('change', function () {
              if($(this).val() === value) {
                  $ele.show();
              }
              else {
                  $ele.hide();
              }
          });
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>My HTML is:</p>
  
  <pre><code>&lt;input type="radio" name="itemOption" id="deleteAllItems" value="deleteAllItems"&gt;Delete items
  &lt;input type="radio" name="itemOption" id="moveAllItems" value="moveAllItems" checked&gt;Move items
  
  &lt;select id="inputCategory" name="category" data-dependent='{"itemOption": "moveAllItems"}'&gt;
     &lt;option&gt;Choose a category to move the items to...&lt;/option&gt;
     &lt;option&gt;Category A&lt;/option&gt;
     &lt;option&gt;Category B&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>