在单选按钮上取消隐藏Div标签选择

Question

我是HTML / JQuery的新手，我试图根据单选按钮选择取消隐藏div标签。在我下面的例子中，如果用户选择SR readio按钮，我想取消隐藏s div - 同样，如果用户选择C单选按钮，我想取消隐藏C div

我把以下语法放在一起，但是当页面加载时无论按哪个单选按钮。 div都不可见。

<script>
$(document).ready(function() {
    $("input[name$='src']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#src" + test).show();
    });
});
</script>

<Input type = 'Radio' Name ='src' value= 'sr'>SR<p>
    <Input type = 'Radio' Name ='src' value= 'C'>C
    <p><p>
    <div id="st" class="desc">
        SR:
        <select name="sp" id="SR" visible="false">
                <option selected="selected">All</option>
                <?php
                foreach ($qry2 as $SR) {
                        ?>
                        <option value="<?= $SR->SR ?>"><?= $SR->SR ?></option>
                <?php };
                ?>
        </select>
    </div>
    <div id="c" class="desc" visible="false">
        C:
        <select name="C" id="C">
                <option selected="selected">All</option>
                <?php
                foreach ($qry1 as $name) {
                        ?>
                        <option value="<?= $name->C ?>"><?= $name->C ?></option>
                <?php };
                ?>
        </select>
    </div>

Answer 1

看起来你几乎得到了它。

.desc元素的ID与您基于单击的输入值构建的选择器不匹配。例如，如果单击“SR”按钮，代码将尝试显示ID为“srcSR”的元素，该元素不存在。

这是一个经过调整的例子：

$(document).ready(function() {
  $("input[name$='src']").click(function() {
    var test = $(this).val();
    $("div.desc").hide();
    $("#list_" + test).show();
  });
})

.desc {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<Input type='Radio' Name='src' value='sr'>SR
<Input type='Radio' Name='src' value='C'>C

<div id="list_sr" class="desc">
  SR:
  <select name="sp" id="SR" visible="false">
    <option selected="selected">All</option>
    <option value="">STUFF</option>
  </select>
</div>
<div id="list_C" class="desc" visible="false">
  C:
  <select name="C" id="C">
    <option selected="selected">All</option>
    <option value="">STUFF</option>
  </select>
</div>