jquery&data-value實作select下拉，展示區号加位址，選擇後隻顯示區号（select展示和選擇不同）

下拉時樣式：

選擇後的樣式：

思想：首先展示一個select，隐藏div，當點選時，隐藏select，展示由div組成的模拟select下拉樣式的元件，點選選擇某個時把select的value改成選的的value，隐藏div，展示select

css：

<style>
        .box {
            width: 120px;
        }
        #select-code {
            width: 120px;
            height: 26px;
            font-size: 16px;
        }
        #div-show-value {
            border: 1px solid #000000;
        }
        .div-show-option {
            border-left: 1px solid #000000;
            border-right: 1px solid #000000;
        }
        .div-show-option:last-child {
            border-bottom: 1px solid #000000;
        }
        .active {
            background-color: rgba(0,0,0,.05);
        }
        .div-show-option:hover {
            background-color: rgba(0,0,0,.05);
            cursor: pointer;
        }
        .none {
            display: none;
        }
    </style>
           

html：

<div class="box">
     <select name="" id="select-code">
         <option value="86">+86</option>
         <option value="886">+886</option>
         <option value="852">+852</option>
     </select>
     <div id="div-show-value" class="none">+86</div>
     <div id="div-show-option" class="none">
         <div data-value="86" class="div-show-option">+86  中國</div>
         <div data-value="886" class="div-show-option">+886 中國香港</div>
         <div data-value="852" class="div-show-option">+852 中國台灣</div>
     </div>
</div>
           

js：

$('#select-code').change(function() {
    var chooseValue = $(this).children('option:selected').val();
})
$('#select-code').click(function() {
    $('#select-code').addClass('none');
    $('#div-show-value').removeClass('none');
    $('#div-show-option').removeClass('none');
    $('#div-show-option').click(function(e) {
        var divValue = e.target.getAttribute('data-value');
        $('#div-show-option .div-show-option').removeClass('active');
        e.target.className = 'div-show-option active'; 
        $('#div-show-value').html('+' + divValue);
        $('#select-code').val(divValue);
        $('#select-code').removeClass('none');
        $('#div-show-value').addClass('none');
        $('#div-show-option').addClass('none');
    })
});