Question

我想建立我的第一个程序。昨天我开始编码而且我无法停止，但我遇到了onchange功能的问题。我希望只有在我的选项列表中选择了Square时才显示<form id="squareA">。其他列表也是如此。我还没有制作他们的表格，因为我被困在了squareA。

这是我的代码。

<script>
  function myShapes() {
    var a1 = document.getElementById("shapes").value;
    if(a1.value == option.value) {
      document.getElementById("square").value = ("squareA");
    } else {
      document.getElementById("square").disabled = true;
    }
  }
}
</script>

<legend>Calculate Dimension</legend>
<select id="shapes" onchange="myShapes">
  <option selected="selected" value="none">Select Shape</option>
  <option onselect="mySquare" id="square" value="Square">Square</option>
  <option onselect="myRect" id="rect" value="Rectangle">Rectangle</option>
  <option onselect="myComb" id="comb" value="Combined">Combined</option>
  <option  onselect="myStrap" id="strap" value="Strap">Strap</option>
  <option  onselect="myTrap" id="trap" value="Trapezoidal">Trapezoidal</option>
</select>
<form id="squareA">
  <div disabled="disabled" id="disa">
    <input id="squareD" type="text" placeholder="Dimension"/> by
    <input id="squareD2" type="text" placeholder="Dimension"/>
  </div>
</form>
</fieldset>

在长线内是代码无效或错误。

Answer 1

您需要在onchange属性中调用该函数，然后检查更改处理程序中的值并设置表单的显示值

＆＃13;

function myShapes() {
  /*On change check the value of the select and based on it set the display css value to either none or block*/
  document.getElementById('squareA').style.display = document.getElementById('shapes').value == 'Square' ? 'block' : 'none'
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<legend>Calculate Dimension</legend>
<select id="shapes" onchange="myShapes()">
  <!--Need to call the function here, id add () at the end-->
  <option selected="selected" value="none">Select Shape</option>
  <option value="Square">Square</option>
  <option value="Rectangle">Rectangle</option>
  <option value="Combined">Combined</option>
  <option value="Strap">Strap</option>
  <option value="Trapezoidal">Trapezoidal</option>
</select>
<form id="squareA" style="display:none;">
  <!--Hide the form on page load-->
  <div disabled="disabled" id="disa">
    <input id="squareD" type="text" placeholder="Dimension" />by
    <input id="squareD2" type="text" placeholder="Dimension" />
  </div>
</form>

＆＃13;

如何隐藏表单并仅在选中时显示？

1 个答案: