Question

我有一点问题，需要你的专业人士......

所以我在两个div中有两种形式。 DIV ID=A and DIV ID=B

当用户访问我的网站时，想要让访问者在表单之间进行选择。用户看到一个下拉框，或两个单选按钮，如果选择选项A然后形成A加载，如果B ...则B ..

但我不知道该怎么做，这样做的最佳做法是什么？我可以使用简单的html，并选择重定向到formA.php和formB.php等子页面？或者使用Jquery和简单的隐藏并显示所需的div？

你建议做什么？我是怎么做到的？

比你。

Answer 1

Jquery或类似的将是最优雅的imo。

之类的东西

<script type="text/javascript">
$(document).ready(function() {
    // hide the forms when page is ready
    $('#a').hide();
    $('#b').hide();

    $('#button1').click(function(){ 
        $('#a').show(); 
    });
    $('#button2').click(function(){ 
        $('#b').show(); 
    });
});
</script>

隐藏表单，有2个按钮（可以是样式div）。然后单击它们时，显示相应的HTML表单。

可以扩展为“切换”表单，或者只允许选择1。

如果JS被禁用，可能会出现问题（两种形式都可见）

Answer 2

您可以轻松使用下拉菜单选择正确的表单。这是一个例子

<!-- Forms HTML -->
<div id="form-A">
    ... html form here ....
</div>
<div id="form-B">
    ... another html form here ....
</div>

<!-- Hide forms initially with Javascript (visible for non Javascript users) -->
<script type="text/javascript">
    $("#form-A, #form-B").hide();
</script>

<!-- A dropdown to select a value -->
<select id="choose-form">
    <option>Please choose...</option>
    <option value="form-A">Some form</option>
    <option value="form-B">Another form</option>
</select>

<!-- and some simple jQuery -->
<script type="text/javascript">
    $(document).ready(function() {
        $("#choose-form").change(function() {

            //Hide -other- visible forms
            $("#form-A, #form-B").hide();
            $("#" + $(this).val()).show();
        });
    });
</script>

Answer 3

我会按照你所说的那样使用jQuery描述的jQuery，如果Javascript被关闭则根据他们的选择重定向它们。

如何在html表单之间切换/选择

3 个答案: