title: Show & hide elements by data attribute
body: <p>I am having problems to hide and show elements in a div by changing a select value.</p>
  
  <p>There might be a better approach of doing this, but what I came up with was to use <code>data-</code> attributes to grab the elements I needed to manipulate.</p>
  
  <p>But I don't get why my code doesn't work!</p>
  
  <p>Here's a simplified version of my problem:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="dialog"&gt;
      &lt;form&gt;
      &lt;select id="form_type"&gt;
          &lt;option data-show="type_0" data-hide="type_1" selected&gt;Show 0&lt;/option&gt;
          &lt;option data-show="type_1" data-hide="type_0"&gt;Show 1&lt;/option&gt;
      &lt;/select&gt;
      &lt;div data-visible="type_0" data-hidden="type_1"&gt;
          &lt;input type="text" value="im visibible for type_0" /&gt;
      &lt;/div&gt;
      &lt;div data-visible="type_1" data-hidden="type_0" class="hidden"&gt;
          &lt;input type="text" value="im visibible for type_1" disabled /&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$('#dialog').find('#form_type').on('change', function(){
  
      var self = $(this),
          selectedOption = self.find('option:selected'),
          showId = selectedOption.data("show"),
          hideId = selectedOption.data("hide"),
          parentForm = self.parents('form');
  
      parentForm
          .find('[data-visible="'+showId+'"]').removeClass('hidden')
          .find('input').prop('disabled', false);
  
  
      parentForm
          .find('[data-hidden="'+hideId+'"]').addClass('hidden')
          .find('input').prop('disabled', true);
  
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.hidden {
      visibility:none;
      display:none;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/n4xo13mg/" rel="nofollow">Fiddle</a></p>
  
  <p>Thanks.</p>