用jQuery隐藏div

Question

I'm using the following code to hide the text based on the answer given. Its so simple but i must be missing something. What am I doing wrong?

$('.nameclass').on('change', function() {
        if( $('input[name=idname]').val() == '1' ) {
        $('#idname').removeClass('hide');
        } else {
            $('#idname').addClass('hide');
        }
    });


        <div class="hide" id="idname"> 
             <legend>To be hidden depending on answer</legend>
        </div>
    </div> 

Answer 1

Your select selector is not correct. In the listener selector, there is no tenaamstellingclass assigned class to the select box. In the if statement you are trying to get the select box by using input[name=tenaamstelling] when you should use it like select[name=tenaamstelling] because it is a select box and not an input field.

You can either add the tenaamstellingclass class to your select input, or use this code.

Just replace this:

$('.tenaamstellingclass').on('change', function() {
    if( $('input[name=tenaamstelling]').val() == 'VOLMACHT' ) {
    $('#tenaamstelling_volmacht').removeClass('hide');
    } else {
        $('#tenaamstelling_volmacht').addClass('hide');
    }
});

with:

$('select[name="tenaamstelling"]').on('change', function() {
    if( $(this).val() == 'VOLMACHT' ) {
        $('#tenaamstelling_volmacht').removeClass('hide');
    } else {
        $('#tenaamstelling_volmacht').addClass('hide');
    }
});

Now, if the .hide is defined correctly in your CSS, everything should be fine

You can check it here:

https://jsfiddle.net/vk3o6gyc/

Given your HTML, the default for the #tenaamstelling_volmacht div is hidden and when option 2 is selected it is then displayed.