少量程式碼,實現大功能!
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無法獲取到內容!