仅在选择特定单选项时显示 DIV

Question

我有这段代码，使用 select 选项没有问题：

HTML

   <select onchange="java_script_:show(this.options[this.selectedIndex].value)">
    <option value="Apple">Apple</option>
    <option value="Orange">Orange</option>
    <option value="Bananna">Bananna</option>
    </select>


 <div id="hiddenDiv" style="display:none">Hidden Question about Oranges</div>

脚本

 <script>
    function show(aval) {
    if (aval == "Orange") {
    hiddenDiv.style.display='inherit';
    } else {
    hiddenDiv.style.display='none';
    }
    }
    </script>

如果这些是单选选项，我有什么想法可以让这段代码工作吗？

Answer 1

我对 JQuery 的解决方案：

$(function () {
    $("select").click(function () {
        var validOption = $("select > option[value='Orange']");
        if (validOption[0].selected) {
            $("#hiddenDiv").show();
        } else {
            $("#hiddenDiv").hidde();
        }
    });
});

Answer 2

像这样尝试

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" id="Apple"/> Apple <br>
  <input type="radio" name="radioName" id="Orange" /> Orange <br>
  <input type="radio" name="radioName" id="Bananna" /> Bananna <br>
</form>

<div id="hiddenDiv" style="display:none">Hidden Question about Oranges</div>
<script>
$('#myForm input').on('change', function() {
   if ($(this).attr('id') == "Orange") {
      hiddenDiv.style.display='inherit';
    } else {
      hiddenDiv.style.display='none';
    } 
});
</script>

仅在选择特定单选项时显示 DIV

Show DIV only when a specific radio item is selected

html

css

hidden

radio