jQuery下拉菜单分类搜索框代码

jQuery下拉菜单分类搜索框代码

这是一款jQuery搜索框表单代码制作实用的下拉菜单选择分类搜索框代码。

使用方法
在页面引入以下jquery.min.js文件

1
<script src="js/jquery.min.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
$(function(){
    $(".select_box").click(function(event){  
        event.stopPropagation();
        $(this).find(".option").toggle();
        $(this).parent().siblings().find(".option").hide();
    });
    $(document).click(function(event){
        var eo=$(event.target);
        if($(".select_box").is(":visible") && eo.attr("class")!="option" && !eo.parent(".option").length)
        $('.option').hide();                                    
    });
    $(".option li").click(function(){
        var check_value=$(this).text();
        var zlValue = $('.option li:eq(1)').html();
        var bqValue = $('.option li:eq(2)').html();
        $(this).parent().siblings(".select_txt").text(check_value);
        $("#select_value").val(check_value);
        if(check_value == zlValue) {
            $('#searchPlaceholder').prop('placeholder','请输入电器名称');
        }else if(check_value == bqValue) {
            $('#searchPlaceholder').prop('placeholder','请输入家用名称');
        }else {
            $('#searchPlaceholder').prop('placeholder','请输入服装名称');
        }
    });
})
</script>

文件信息:

    1

    发表评论