SOURCE

$(".selectopt").on("click", function () {
    //console.log($("#box").attr("checked"))
    if ($(this).is(":checked")) {
        // console.log("yes")
        var values = $("this").val();
        // console.log(values);
        var showinfo = "#showItem" + values;
        // console.log(showinfo);
        var count = $("#showbox div").size();
        // console.log(count);
        for (i = 0; i <= count; i++) {
            var hideinfo = "#showItem" + i;
            console.log(hideinfo + "hide")
            $(hideinfo).hide();
        }
        $(showinfo).show();
        console.log(showinfo + "show")
    }
})

<div>
	<div class="select" tabindex="1">
                <input class="selectopt" name="test" type="radio" onchange="showdialog(); id="opt1" value="1" checked>
                <label for="opt1" class="option">公告</label>
                <input class="selectopt" name="test" type="radio" onchange="showdialog(); id="opt2" value="2">
                <label for="opt2" class="option">职位</label>                
              </div>
    <div id="showbox">
        <div id="showItem1" title="第一">1</div>
        <div id="showItem2" title="第二" style="display:none;">2</div>
    </div>
</div>

#select{
    height: 32px;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
    z-index: 99;
}
#showbox{
    height: 200px;
    border:#ccc solid 1px;
    background: #eee;
    box-sizing: border-box;
    padding: 20px;
    padding-top:50px;
    position: relative;
    margin: 0;
}