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');
    })
});