少量代码,实现大功能!
html代码不多说,贴图出来!

效果如下:

下拉效果如下:

重点来了,js代码是重重之重:

$(function () {
        $(".formOption").click(function () {  //点击外层,下拉出现
            $(this).siblings('.formList').show();
        })
        $(".formPic").click(function () {   //点击图片,下拉出现
            if ($(this).siblings('.formList').is(":hidden")) {
                $(this).siblings('.formList').show();
            } else {
                $(this).siblings('.formList').hide();
            }
        })
        $('.formList').on('click', 'li', function () {    //点击下拉内容,赋值input及操作
            var li_txt = $(this).html();
            var li_value = $(this).attr('tit');
            $(this).parent().siblings('input.formOption').attr('title', li_value);
            var  Lid = $(this).parent().siblings('input.formOption').attr('id');  //获取input的id
            switch(Lid)   //判断id是省市县
            {
                case 'AreaCode1':   //省份id,执行获取市区代码
                    quxian(li_value);                 
                    break;
                case 'AreaCode2':  //市区id,执行获取区县代码
                    lvshi(li_value);
                    break;
            }
            $(this).parent().hide();
            $(this).parent().siblings('input.formOption').val(li_txt);
        })
        $('.formSlect').mouseleave(function () {   //下拉框鼠标移除,隐藏
            $('.formList').hide();
        })
    });

注意:$(this).attr(‘value’);获取是只支持int类型,不支持string类型,string无法获取到内容!