jake123 jake123 - 7 months ago 12
Javascript Question

Showing div when dropdown is slected and radio button is clicked

I have this

drop down
when I select that particular option I am given a
radio
button so when I choose the radio button I should be displayed a
div
and when I choose something else from the
drop down
menu that
div
which was shown should now be hidden

index.html

<select id="selection" name="sub_sel">
<option value="blank"></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
</select>

<div id="buttons" style="display:none;">
<form id='form-id'>
<input id='radio1' name='test' type='radio' /> Number1<br />
<input id='radio2' name='test' type='radio' /> Number 2<br />
</form>
</div>

<div id='select_raido1' style='display:none'>Div1</div>
<div id='select_raido2' style='display:none'>Div2</div>


jquery.js

$(document).ready(function(){
$('#selection').on('change', function(){

if (this.value == 'option_1')
{
$("#buttons").show();
}else{
$("#buttons").hide();
}
});
});

$('#form-id').change(function() {

if ($('#radio1').attr('checked')) {
$('#select_raido1').show();
} else {
$('#select_raido1').hide();
}

if ($('#radio2').attr('checked')) {
$('#select_raido2').show();
} else {
$('#select_raido2').hide();
}
});


Here is a fiddle

This is what i have so far can somebody please tell me what i am doing incorrect

i am unable to display div when i click on the radio button and hide them when choosing a different drop down option

Answer

Check with :checked for radiobutton. Try like this:

$('#form-id').change(function() {

        if ($('#radio1').is(':checked')) {
            $('#select_raido1').show();
        } else {
            $('#select_raido1').hide();
        }
         if ($('#radio2').is(':checked')) {
            $('#select_raido2').show();
        } else {
            $('#select_raido2').hide();
        }
        });

Updated the fiddle: https://jsfiddle.net/43rx29vj/6/