1

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

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

对于 Wordpress，搜索 url 将是：/?s=TEST 对于 Opencart：/shop/?route=product/search&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>

提前感谢您的帮助，马库斯

4

1 回答 1

2

使用 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/

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

于 2012-04-11T17:38:10.910 回答