详解div模拟select效果及点击跳转

HTML

    <div class="select_box">
        <span class="select">没错就是点我</span> 
        <a href="javascript:;" οnclick="sure()"><img src="../images/sure_btn.png"></a>
    </div>
    <ul class="sub">
        <li data-id="1">我是老大</li>
        <li data-id="2">我是老二</li>
        <li data-id="3">我是老三</li>
        <li data-id="4">我是老四</li>
    </ul>

CSS

    *{
            margin: 0;
            padding: 0; 
       }
       ul li{
           list-style: none;
           font-size:.3rem; 
           border-bottom:1px dotted #000;/*li底部边框设置*/
           text-align: center;/*内容居中*/
       }
       .select_box{
           position: absolute;
            display: flex;/*弹性盒子*/
            left: 2rem;
            top:2rem;
       } 
       .select{
            width: 3rem;
            height: .5rem;
            border: 1px solid #ccc;/*span背景*/
            border-radius: 5px;/*圆角*/
            font-size:.4rem; 
               }
        img{
            position: absolute;
            width: 1.5rem;
            height:.8rem;
            margin:-.1rem 0 0 -.2rem;
        }
        .sub{
            position: absolute;
            display: none;
            top: 2.53rem;
            left: 2rem;
            background-color: #ccc;
            width: 3rem;
            height: 2.82rem;
            line-height:.7rem;
        }

JS

//rem设置
$('html').css('font-size', document.documentElement.clientWidth /7.50 + 'px');

//显示下拉框
$('.select').click(function(){
  $('.sub').show();
})
var id;
//选择完成，获取id，隐藏下拉框
$('.sub li').click(function(){
  id = $(this).data("id");
  // console.log(id);
  set_text(id);
  $('.sub').hide();
})
//重新设置select框的文字
function set_text(id){
  switch(id){
    case 1:
    $('.select').html("我是老大");
			break;

		case 2:
    $('.select').html("我是老二");
			break;

		case 3: 
    $('.select').html("我是老三");
			break;

		case 4:
    $('.select').html("我是老四");
			break;
		default:		
		}
}
// 提交
function sure(){
  switch(id){
    case 1:
    location.href = "#";
			break;
		case 2:  
    location.href = "##";
			break;
		case 3: 
    location.href = "###";
			break;
		case 4:  
    location.href = "####";
			break;
		default:
			
		}
}