使用jquery选择下拉时如何搜索结果？

Question

<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>

在这段代码中，我现在有一个带有list ul的搜索框表单，当我选择find_job然后search job输入字段active和如果我选择find_freelancer然后freelancer输入字段active时，我在这里做什么。现在，我单击class="submitss"或按enter key时所需的内容，然后显示job_id and job_val，但如果选择，则显示freelancer_id and freelancer_val。

那我该怎么做呢？请帮帮我。

谢谢

Answer 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:意想不到的令牌)