Question

我正在使用HTML构建网络表单，我确信这是一个简单的查询，但我找不到答案。

修改以下一行：

<div id="A" style="display: none;">

我只能显示所有问题或没有问题。

我想要的是当用户在第一个问题中选择“是”时，则会出现div id = a，如果他选择“否”，则会跳到div id = b

有什么想法吗？

<body>

是否有访问者

<div id="referrals">
    <select id="QuestionOptions">
    <p>is there visitors to the property</p>
        <option value="A">Yes</option>
        <option value="B">No</option>
    </select>
</div>
<div id="referrals">
    <div id="A" style="display: none;">
        <div id="QuestionC">
            <p>Does he have liability cover</p>
        </div>
        <div id="QuestionD">
            <select id="QuestionOptionsD">
                <option value="G">Yes</option>
                <option value="H">No</option>
            </select>
        </div>
    </div>
    <div id="B" style="display: none;">
        <div id="QuestionE">
            <p>Does he have stock</p>
        </div>
        <div id="QuestionF">
            <select id="QuestionOptionsF">
                <option value="I">Yes</option>
                <option value="J">No</option>
            </select>
        </div>
    </div>
</div>

Answer 1

你可以用JQuery实现你想要的。您必须在<body>代码

的末尾粘贴以下代码

<body>
  ...
  ...YOUR HTML CODE GOES HERE
  ...
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><!--THIS LOADS JQUERY FROM GOOGLE CDN-->
  <script> //this is your javascript function
    $(document).ready(function(){
      $('#QuestionOptions').change(function(){
        if ( $(this).val() == 'A'){
          $('#A').css('display','block');
          $('#B').css('display','none');
        }else{
          $('#B').css('display','block');
          $('#A').css('display','none');
        }
      });
    });
  </script>
</body>

HTML Web Form条件字段查询

1 个答案: