javascript验证（如果选择了无线电），然后需要下拉列表

Question

I have a radio field in my form that has 3 elements. 我的表单中有一个无线电字段，其中包含3个元素。 color, sleeve, size 颜色，袖子，尺寸

based on the radio selection I do a show/hide of 3 select boxes. 基于单选，我会显示/隐藏3个选择框。 select- color-type red, blue, green etc, etc select - sleeve-type full sleeve, half sleeve, sleeveless select - size-type small, medium, large, extra large how can I make the select field mandatory if one of the related radio is selected example: if color radio is selected then drop-down color-type is a required field, else if, radio sleeve is selected then drop-down sleeve-type is selected and so on. select-颜色类型的红色，蓝色，绿色等，等等select-袖子类型的全袖，半袖，无袖选择-大小类型的小，中，大，特大，如果我要选择的字段之一，我该如何使选择字段成为必需选择了相关的广播示例：如果选择彩色广播，则下拉颜色类型是必填字段，否则，如果选择无线电套筒，则选择下拉套筒类型，依此类推。

 <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>

Answer 1

There are a few ways to accomplish this. 有几种方法可以完成此操作。 You can get the immediate child of the div you are setting the style.display attribute and set that child as required. 您可以获取正在设置style.display属性的div的直接子级，并根据需要设置该子级。 At the moment the first child is your select input, keep in mind this may cause trouble in the future if you decide to add more elements. 目前，第一个孩子是您的select输入，请记住，如果您决定添加更多元素，将来可能会造成麻烦。

If you want a more robust way to go around I would add another parameter to your showLayer() and hideLayer() functions representing the ID of the select field you want to make required and get these elements directly. 如果您想采用更健壮的方法，可以在showLayer()和hideLayer()函数中添加另一个参数，以表示要设置的select字段的ID，并直接获取这些元素。

Working Example: 工作示例：

 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>

Notice that I added the appropriate input ID as arguments in your HTML 请注意，我在HTML中添加了适当的输入ID作为参数。

javascript验证（如果选择了无线电），然后需要下拉列表

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-09-06 14:13:22

javascript验证（如果选择了无线电），然后需要下拉列表

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-09-06 14:13:22

解决方案1
0 已采纳 2019-09-06 14:13:22