效果如下：
代碼如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/cs.css" disabled="true">
<style>
body{padding:30px;font-family: "微軟雅黑";}
li{list-style: none;}
*{padding:0;margin:0;}
#selector{position:relative;height:30px;width:210px;font-size:13px;line-height:30px;text-align:left;user-select:none;}
#selector select{display:none;}
#selector .arrow{position:absolute;right:5px;top:12px;display:block;height:0;width:0;border-top:8px solid red;border-right:5px solid transparent;border-left:5px solid transparent;}
#selector .mr-selector{display:block;height:30px;width:200px;padding-left:10px;border:1px solid red;cursor:default;}
#selector .select{display:none;width:210px;margin-top:-1px;border:1px solid red;}
#selector .select li{height:30px;line-height:30px;padding-left:10px;}
#selector .select li:hover{background:red;color:#fff;cursor:default;}
</style>
<title>selector插件</title></head><body>
<p id="selector">
<select class="hd-selector">
<option value="0" selected="selected">默認選項</option>
<option value="1">選項內(nèi)容一</option>
<option value="2">選項內(nèi)容二</option>
<option value="3">選項內(nèi)容三</option>
<option value="4">選項內(nèi)容四</option>
</select>
<span class="mr-selector">請選擇選項</span>
<span class="arrow"></span>
<ul class="select">
<li>請選擇選項</li>
<li>選項內(nèi)容一</li>
<li>選項內(nèi)容二</li>
<li>選項內(nèi)容三</li>
<li>選項內(nèi)容四</li>
</ul>
</p>
<script src="../Util/jquery-1.11.3.min.js"></script>
<script>
(function(){
var selector = $("#selector"); var select = $("#selector .select"); //模擬select的ul選項
var mrSelector = $("#selector .mr-selector"); var li = $("#selector .select li"); //li選項
selector.click(function(eve){
eve.stopPropagation(); //阻止冒泡避免點擊后消失
});
mrSelector.click(function(){
select.toggle();
});
li.click(function(eve){
var index = $(this).index();
console.log(index); var text = $(this).text(); //獲取當(dāng)前點擊li文本
mrSelector.text(text); //賦值默認選項文本
console.log($("#selector .hd-selector option"));
selector.find(".hd-selector option").eq(index)
.attr("selected","selected").siblings().removeAttr("selected");
$(this).parent().hide();
});
$("body").click(function(){
select.hide();
});
}()); </script></body></html>聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
