jQuery是一款非常實用的JavaScript庫，它可以幫助我們輕松快速地實現各種功能，其中之一便是模擬select選擇框。下面我們來具體了解一下這個功能。

//HTML結構
<div id="selectBox" class="selectBox">
<div class="selectContent">
<span class="currentSelect">請選擇</span>
<ul class="selectList">
<li>選項1</li>
<li>選項2</li>
<li>選項3</li>
<li>選項4</li>
</ul>
</div>
</div>
//CSS樣式
.selectBox{
position:relative;
width:100px;
height:30px;
border:1px solid #ccc;
cursor:pointer;
}
.selectContent{
position:absolute;
top:30px;
left:0;
width:100%;
height:auto;
border:1px solid #ccc;
background:#fff;
display:none;
}
.currentSelect{
display:inline-block;
width:80%;
height:28px;
line-height:28px;
padding:0 10px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.selectList{
list-style:none;
margin:0;
padding:0;
}
.selectList li{
width:100%;
height:30px;
line-height:30px;
padding:0 10px;
cursor:pointer;
background:#f0f0f0;
}
.selectList li.selected{
background:#e6f7ff;
}
//JS動態(tài)效果
$(function(){
//下拉框展開
$('.selectBox').click(function(){
$(this).find('.selectContent').slideDown();
});
//下拉框收起
$(document).click(function(){
$('.selectContent').slideUp();
$('.selectList li').removeClass('selected');
$('.currentSelect').text('請選擇');
});
//選項選擇
$('.selectList li').click(function(){
$('.selectList li').removeClass('selected');
$(this).addClass('selected');
var value=$(this).text();
$('.currentSelect').text(value);
});
});

通過上述代碼，我們實現了一個div模擬select的功能。我們可以點擊下拉框展開，選擇一個選項后，下拉框會自動收起并顯示我們選擇的選項。