javascript - javascript验证如果选择了收音机然后需要下拉

问题描述

我的表单中有一个包含 3 个元素的单选字段。颜色、袖子、尺寸

根据收音机选择，我显示/隐藏 3 个选择框。选择 - 颜色类型红色、蓝色、绿色等选择 - 袖型全袖、半袖、无袖选择 - 尺寸类型小号、中号、大号、特大号如果其中之一，我如何使选择字段成为必填项选择相关单选示例：如果选择彩色单选，则下拉颜色类型为必填字段，否则如果选择单选，则选择下拉套筒类型，依此类推。

 <script type="text/javascript">
  function showLayer(layerName)
  {
    document.getElementById(layerName).style.display="block";
  }
  function hideLayer(layerName)
  {

  document.getElementById(layerName).style.display="none";
  }
</script>

<form method="post" action="" name="rregister" id="rregister">

    <div>
      <label><input type="radio"  name="ctype" id="color" value="color" onclick="showLayer('hlayer1'); hideLayer('hlayer2'); hideLayer('hlayer3');" required>Color</label>
      <label><input type="radio" name="ctype" id="sleeve" value="sleeve" onclick="showLayer('hlayer2'); hideLayer('hlayer1'); hideLayer('hlayer3');">Sleeve</label>
      <label><input type="radio" name="ctype" id="size" value="size" onclick="showLayer('hlayer3'); hideLayer('hlayer2'); hideLayer('hlayer1');">Size</label>
    </div>

    <div id="hlayer1" style="display: none;">
      <select id="colortype" name="colortype">
        <option value="" selected="selected">Color</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="green">green</option>
        <option value="yellow">yellow</option>
      </select>
    </div>

    <div id="hlayer2" style="display: none;">
      <select id="sleevetype" name="sleevetype">
        <option value="" selected="selected">Sleeve </option>
        <option value="Half">Half</option>
        <option value="Full">Full</option>
        <option value="Sleeveless">Sleeveless</option>
      </select>
    </div>

    <div id="hlayer3" style="display: none;">
      <select id="sizetype" name="sizetype">
        <option value="" selected="selected">Size</option>
        <option value="S">Small</option>
        <option value="M">Medium</option>
        <option value="L">Large</option>
        <option value="XL">Xtra Large</option>
      </select>
    </div>

    <div>
      <input type="submit" name="submit"  id="submit" value="Submit" />
    </div>
</form>

标签： javascriptjqueryhtml

有几种方法可以做到这一点。您可以获取要设置style.display属性的 div 的直接子级，并根据需要设置该子级。目前第一个孩子是您的select输入，请记住，如果您决定添加更多元素，这可能会在将来造成麻烦。

如果您想要一种更强大的解决方法，我会在您的函数showLayer()和hideLayer()函数中添加另一个参数，该参数表示您要设为必需的选择字段的 ID，并直接获取这些元素。

工作示例：

function showLayer(layerName, myField)
  {
    document.getElementById(layerName).style.display="block";
    
    //set the appropriate field as required
    document.getElementById(myField).required = true;
  }
  function hideLayer(layerName, myField)
  {

  document.getElementById(layerName).style.display="none";
  //set fields as not required
  document.getElementById(myField).required = false;
  }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>

<form method="post" action="" name="rregister" id="rregister">

    <div>
      <label><input type="radio"  name="ctype" id="color" value="color" onclick="showLayer('hlayer1', 'colortype'); hideLayer('hlayer2', 'sleevetype'); hideLayer('hlayer3', 'sizetype');">Color</label>
      <label><input type="radio" name="ctype" id="sleeve" value="sleeve" onclick="showLayer('hlayer2', 'sleevetype'); hideLayer('hlayer1', 'colortype'); hideLayer('hlayer3', 'sizetype');">Sleeve</label>
      <label><input type="radio" name="ctype" id="size" value="size" onclick="showLayer('hlayer3', 'sizetype'); hideLayer('hlayer2', 'sleevetype'); hideLayer('hlayer1', 'colortype');">Size</label>
    </div>

    <div id="hlayer1" style="display: none;">
      <select id="colortype" name="colortype">
        <option value="" selected="selected">Color</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="green">green</option>
        <option value="yellow">yellow</option>
      </select>
    </div>

    <div id="hlayer2" style="display: none;">
      <select id="sleevetype" name="sleevetype">
        <option value="" selected="selected">Sleeve </option>
        <option value="Half">Half</option>
        <option value="Full">Full</option>
        <option value="Sleeveless">Sleeveless</option>
      </select>
    </div>

    <div id="hlayer3" style="display: none;">
      <select id="sizetype" name="sizetype">
        <option value="" selected="selected">Size</option>
        <option value="S">Small</option>
        <option value="M">Medium</option>
        <option value="L">Large</option>
        <option value="XL">Xtra Large</option>
      </select>
    </div>

    <div>
      <input type="submit" name="submit"  id="submit" value="Submit" />
    </div>
</form>

</body>
</html>

请注意，我在您的 HTML 中添加了适当的输入 ID 作为参数

javascript - javascript验证如果选择了收音机然后需要下拉

问题描述

解决方案

推荐阅读