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- attributes to grab the elements I needed to manipulate.

But I don't get why my code doesn't work!

Here's a simplified version of my problem:

HTML

<div id="dialog">
    <form>
    <select id="form_type">
        <option data-show="type_0" data-hide="type_1" selected>Show 0</option>
        <option data-show="type_1" data-hide="type_0">Show 1</option>
    </select>
    <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>
    </form>
</div>

jQuery

$('#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);

});

CSS

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

Fiddle

Thanks.

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- attributes to grab the elements I needed to manipulate.

But I don't get why my code doesn't work!

Here's a simplified version of my problem:

HTML

<div id="dialog">
    <form>
    <select id="form_type">
        <option data-show="type_0" data-hide="type_1" selected>Show 0</option>
        <option data-show="type_1" data-hide="type_0">Show 1</option>
    </select>
    <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>
    </form>
</div>

jQuery

$('#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);

});

CSS

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

Fiddle

Thanks.

• javascript
• jquery

• why use $('#dialog').find('#form_type') and not $('#form_type') where #form_type is an ID and should be unique in the dom ? – Hacketo Commented Aug 4, 2015 at 7:17
• 1 Just for future reference, you should include what you mean by doesn't work just to clarify for others. Otherwise this is a good question – CodingIntrigue Commented Aug 4, 2015 at 7:17
• Hacketo In my real code im having to grab the $('#form_type') from a stored variable, dialog.find('#form_type'). But I see your point. RGraham If i knew what was wrong I wouldnt ask ? – oBo Commented Aug 4, 2015 at 7:20

2 Answers 2

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/jq4d709q/
• fiddle for the second solution: https://jsfiddle/x0dj1gce/

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

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./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>