Question

我试图做一些像这样的事情：

enter image description here

$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function (e) {
    var cache = $(this).next('ul');
    $('#filter ul:visible').not(cache).hide();
    cache.toggle();
});

我试图让它降级，所以如果没有javascript，他们可以提交表单来调整结果，但是使用javascript，他们只需点击所需结果的文本即可。

问题A

如何通过单击文本来启用它，启用javascript，它不仅可以选择单选按钮，还可以提交表单。

问题B

我的代码是否是实现这一预期结果的正确方法？

Answer 1

用提交按钮替换单选按钮。

<input type="submit" name="status" value="Status 1">

Answer 2

如果启用了javascript，我已使用隐藏的提交按钮更新了您的fiddle。

<div>
    <form action="/echo/html/">
        <ul id="filter">
            <li> <a href="#" class="dropdown">Any status ▾</a>
                <ul class="opt">
                    <li>
                        <label>
                            <input type="radio" name="status" />Status 1</label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="status" />Status 2</label>
                    </li>
                    <li>
                        <input type="submit" value="submit"/>
                    </li>
                </ul>
            </li>
            <li> <a href="#" class="dropdown">Any date ▾</a>

                <ul class="opt">
                    <li>
                        <label>
                            <input type="radio" name="date" />Date 1</label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="date" />Date 2</label>
                    </li>
                    <li>
                        <input type="submit" value="submit"/>
                    </li>
                </ul>
            </li>
        </ul>
    </form>
</div>
<div id="results">
    Filtered results go here
</div>
<script>
    $("ul.opt").addClass("hidden");
    $('#filter > li > a').on("click", function (e) {
        var cache = $(this).next('ul');
        $('#filter ul:visible').not(cache).hide();
        cache.toggle();
        $('#filter li input[type=submit]').hide();
    });
    $('#filter input[type=radio]').click(function() {
        var $form = $(this).closest('form');
        $('#results').html('filtering...');
        $.post($form.attr('action'),$form.serialize(),function(response) {
            if ( response ) {
               $('#results').html(response);
            } else {
               $('#results').html('no results found');
            }
        });
    });
</script>

Answer 3

我认为谷歌使用<a>标签代替<input>并且（但我不确定）抓住点击并进行ajax调用以仅更新结果（没有任何形式）...就像：http://jsfiddle.net/928Dj/25/

HTML，在<input>中更改<a>：

<a href="search.action?status=status1">Status 1</a>

JS

$('ul.opt a').click(function(e){
    e.preventDefault();
    $(this).parents(".opt").find("a").removeClass("active");
    $(this).addClass("active");

    $.get($(this).attr("href"),function(res){
        //do something with response
    });
});

在<a>点击JS，只需通过AJAX执行带有search.action类似参数的sortDate=status1（或其他搜索服务），即可对结果进行排序。

您可以连续排序参数status=status1&date=date1进行多次排序。

我不知道是否有任何方法可以在不使用javascript的情况下执行提交（并且无需重新加载所有页面）。

在链接点击上提交过滤表单

3 个答案: