javascript - 选择下拉菜单并单击单选按钮时显示 div

Question

当我选择那个特定选项时，我有这个下拉，我得到一个radio按钮，所以当我选择单选按钮时，我应该显示一个div 并且当我从 drop down 菜单中选择其他内容时，显示的 div 现在应该被隐藏

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

这就是我到目前为止所知道的，有人可以告诉我我做错了什么

我无法在单击单选按钮时显示 div，在选择不同的下拉选项时无法隐藏它们

Answer 1

检查 :checked 单选按钮。像这样尝试:

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

更新了 fiddle :https://jsfiddle.net/43rx29vj/6/