Question

我正在尝试使用一个选择框从一个搜索表单切换到另一个搜索表单，但我对HTML表单非常缺乏经验。

这两个选项应该是“博客”和“商店”。（仅供参考，一个用于Wordpress的博客和一个用于Opencart的商店。）

对于Wordpress，搜索网址为：/？s = TEST 对于Opencart：/ shop /？route = product / search＆amp; filter_name = TEST

到目前为止，这是两种形式：

<form method="get" id="blogsform" class="form-search" action="/">
 <input type="search" name="s" id="s" placeholder="Blog durchsuchen ...">
 <input type="submit" class="submit" id="searchsubmit" value="Durchsuchen">
</form>

<form method="get" id="shopsform" class="form-search" action="/shop/">
 <input type="hidden" name="route" value="product/search">
 <input type="search" name="filter_name" placeholder="Shop durchsuchen ...">
 <input type="submit" class="submit" id="searchsubmit" value="Durchsuchen">
</form>

先谢谢你的帮助，马库斯

Answer 1

使用jQuery，这些是在选择框的onchange事件中应用的简单更改：

<select id="chooseform">
    <option value="">Select Form...</option>
    <option value="Blog">Blog</option>
    <option value="Shops">Shops</option>
</select>

如果您想要两个表单，并根据选择显示/隐藏每个表单，您可能会这样做：

$('#chooseform').change(function() {
    var choice = $(this).val();
    if (choice == "Blog")
    {
        $('#blogsform').show();
        $('#shopsform').hide();
    }
    else if (choice == "Shops")
    {
        $('#blogsform').hide();
        $('#shopsform').show();
    }
    else
    {
        $('#blogsform').hide();
        $('#shopsform').hide();
    }
});

演示：http://jsfiddle.net/Pf9QQ/

如果您想拥有单个表单，但根据选择动态更改操作/方法并显示表单属性，则可以这样做：

$('#chooseform').change(function() {
    var choice = $(this).val();
    if (choice == "Blog")
    {
        $('#theform').attr('action', '/');
        $('#s').attr('name', 's');
        $('#s').attr('placeholder', 'Blog durchsuchen ...');
        $('#theform').show();
    }
    else if (choice == "Shops")
    {
        $('#theform').attr('action', '/shop/');
        $('#s').attr('name', 'filter_name');
        $('#s').attr('placeholder', 'Shop durchsuchen ...');
        $('#theform').show();
    }
    else
    {
        $('#theform').hide();
    }
});

演示：http://jsfiddle.net/JgLSE/

您选择哪种方法取决于哪种方式更易于维护。如果你有非常大的表单只有一些细微差别，你可以使用第二种方法。如果表单非常不同，我会保留两个单独的整个表单，并根据用户的选择适当地显示/隐藏它们，因为这样可以减少混淆或复杂。

如何选择使用哪种搜索表单？

1 个答案: