Show & Hide Elements By Data Attribute

I am having problems to hide and show elements in a div by changing a select value. There might be a better approach of doing this, but what I came up with was to use data- attribu

Solution 1:

while @Arun's answer is correct and will solve your problem, and will support more than 2 options.. and you should use it - it still doesn't answer what is the bug in your code..

The problem is that you keep hiding/showing the same element..

Looking at your HTML, you have 2 elements, with data-visible and data-hidden switched.

<div data-visible="type_0" data-hidden="type_1">
    <input type="text" value="im visibible for type_0" />
</div>
<div data-visible="type_1" data-hidden="type_0" class="hidden">
    <input type="text" value="im visibible for type_1" disabled />
</div>

So when you run the following javascript, both refer to the same object...

parentForm
    .find('[data-visible="'+showId+'"]').removeClass('hidden')
    .find('input').prop('disabled', false);


parentForm
    .find('[data-hidden="'+hideId+'"]').addClass('hidden')
    .find('input').prop('disabled', true);

Lets look at a specific example.

Lets assume showId is type_1, which means hideId is type_0..

The selector [data-visible="type_1"] and the selector [data-hidden="type_0"] point to the same element.

If you wish to keep the same logic and simply fix the bug you could do one of the following

• refer to showId or hideId but not both.
• refer to data-visible or data-hidden but not both.

The first option means to change the code to:

parentForm
    .find('[data-visible="'+showId+'"]').removeClass('hidden')
    .find('input').prop('disabled', false);


parentForm
    .find('[data-hidden="'+showId+'"]').addClass('hidden')
    .find('input').prop('disabled', true);

and the second option means changing the code to

parentForm
    .find('[data-visible="'+showId+'"]').removeClass('hidden')
    .find('input').prop('disabled', false);


parentForm
    .find('[data-visible="'+hideId+'"]').addClass('hidden')
    .find('input').prop('disabled', true);

either of which should solve the problem.

• fiddle for first solution: https://jsfiddle.net/jq4d709q/
• fiddle for the second solution: https://jsfiddle.net/x0dj1gce/

This explains why your code does not work. For production, please use Arun's solution.

Solution 2:

I don't think you need to have 2 attributes, since you will show only 1 at any time, you can hide all other data-visible elements

$('#form_type').on('change', function() {

  var self = $(this),
    selectedOption = self.find('option:selected'),
    showId = selectedOption.data("show"),
    parentForm = self.closest('form'),
    $el = parentForm.find('[data-visible="' + showId + '"]');

  parentForm.find('[data-visible]').not($el).addClass('hidden').find('input').prop('disabled', true);


  $el.removeClass('hidden')
    .find('input').prop('disabled', false);

});

.hidden {
  visibility: none;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dialog">
  <form>
    <select id="form_type">
      <option data-show="type_0" selected>Show 0</option>
      <option data-show="type_1">Show 1</option>
    </select>
    <div data-visible="type_0">
      <input type="text" value="im visibible for show_0" />
    </div>
    <div data-visible="type_1" class="hidden">
      <input type="text" value="im visibible for show_1" disabled />
    </div>
  </form>
</div>