Using Jquery to show and hide elements based on an input

Question

I have been trying to create a form which changes depending on the users entry. So far I have been successful in using a radio input to change which content is to be shown, but I am having trouble editing the JS to work with a drop down menu.

HTML

<div class="show-and-hide-content">
    <select>
        <option></option>
        <option data-type="true">true</option>
        <option data-type="false">false</option>
    </select>
    <div class="hidden content content-true">You have selected true.</div>
    <div class="hidden content content-false">You have selected false.</div>
</div>

CSS

.hidden {
    display:none;
}

Javascript

$(function () {
    $('.show-and-hide-content').each(function (i) {
        var $row = $(this);
        var $selects = $row.find('select');
        $selects.on('change', function () {
            var type = $(this).attr('data-type');
            $row
                .find('.content').hide()
                .filter('.content-' + type)
                    .show();
        });
    });
});

Working radio button JSFiddle

Non working drop down JSFiddle

I know that the JQuery is finding the right elements and is changing the display of them, but it never changes the display to make them visible. I think the problem may be that the JS isn't correctly getting the data-type variable from the option's.

I want the JQuery to work as intended and show the correct divs based on the users selection.

How can I amend the code to do this? Thanks for helping.

Answer 1

You now got:

var type = $(this).attr('data-type');

Since the function is called on the <select> , you select the data-type attribute of the <select> (which is defined), and not from the <option> .

So, you'll need to find the selected <option> :

var type = $(this).find('option:selected').attr('data-type');

Check the updated Fiddle .

[EDIT]

If you want to simplify your code, you could use this:

$(function () {
    $('.show-and-hide-content select').on('change', function() {
        $(this).parent().
            find('.content').hide()
            .filter('.content-' + $(this).find('option:selected').attr('data-type') ).show();
    });
});

Demo .

Answer 2

Or change your select data-type to value and use

var type = $(this).val();

DEMO

Answer 3

Try this one

$(function () {
    $('#select').on('change', function () {
        var selctedval  = $(this).val();
        $('.content').hide();
        $('.content-' + selctedval).show();
    });
});

Answer 4

This will use whatever value you have in the "data-type" attribute and match it to the "content-" class that you have on the message. If there is no matching message then, no message will show.

$('.show-and-hide-content select').on('change', function(){
    var selected = $(this).find('option:selected').data('type');
    $('.content').addClass('hidden');
    $('.content-' + selected).removeClass('hidden');
});

Here is a fiddle