使用jQuery选择下拉菜单时如何搜索结果?

时间:2019-01-10 09:26:47

标签: javascript jquery html

<script>
    $(document).ready(function(){
        $("#find_jobs").click(function(){
            $("#job").css("display","block");
            $("#freelancer").css("display","none");
        });
        $("#find_freelancer").click(function(){
            $("#job").css("display","none");
            $("#freelancer").css("display","block");
        });
        $(".submitss").click(function(){
            job_id = $(".job_search").attr('id');
            job_val = $(".job_search").val();
            alert(job_id);
            alert(job_val);
        });
    });
</script>
<form class="form-horizontal" role="form" method="post" id="myform">        
    <div class="input-group" id="header-search">
        <div class="input-group-btn">
            <div class="btn-group" role="group">
                <a href="javascript:void();" class="submitss" id="submitss"><i class="fa fa-search"></i></a>
                <div class="dropdown dropdown-lg">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="margin-top: 10px;"><span class="caret"></span></button>
                    <div class="dropdown-menu dropdown-menu-left" role="menu">
                        <div class="form-group">
                            <ul>
                                <li><a href="javascript:void(0)" id="find_job" class="find_jobs" value="job">Find Jobs</a></li>
                                <li><a href="javascript:void(0)" id="find_freelancer" class="find_freelancer" value="freelancer">Find Freelancers</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="text" id="job" class="form-control job_search" placeholder="Search Job" name="job_search" style="display:block;"/>
        <input type="text" id="freelancer" class="form-control freelancer_search" placeholder="Search Freelancer" name="freelancer_search" style="display:none;"/>
    </div>
</form>

在这段代码中,我有一个带有列表ul的搜索框表单,现在,当我选择find_job然后search job输入字段处于活动状态并且如果我选择{{ 1}},然后find_freelancer输入字段处于活动状态。现在,我需要什么当我单击freelancer或按class="submitss"时它会显示enter key,但是如果我选择它,则它会显示job_id and job_val

那么,我该怎么做?请帮助我。

谢谢

1 个答案:

答案 0 :(得分:1)

如果我对您的理解正确,这应该可以完成。基本上,如果input#job是可见的表演工作,则显示自由职业者。我真的看不到需要使用两个不同的输入字段,但是可以。

function submit() {
    if ($("#job").css("display") === "block") {
        job_id = $(".job_search").attr('id');
        job_val = $(".job_search").val();
    } else {
        job_id = $(".freelancer_search").attr('id');
        job_val = $(".freelancer_search").val();
    }
    alert(job_id);
    alert(job_val);
}

$(document).ready(function(){
    $(window).keydown(function(event) {
        if (event.keyCode == 13) { // enter key
            submit();
            event.preventDefault();
            return false;
        }
    });

    $("#find_job").click(function () { // find_job not find_jobs
        $("#job").css("display", "block");
        $("#freelancer").css("display", "none");
    });

    $("#find_freelancer").click(function() {
        $("#job").css("display", "none");
        $("#freelancer").css("display", "block");
    });

    $(".submitss").click(submit);
});

<a href="javascript:void();" class="submitss" id="submitss">

应该是

<a href="javascript:void(0);" class="submitss" id="submitss">

或者你得到

  

未捕获的SyntaxError:意外令牌