點擊下拉菜單並選擇選項，會把新的選項賦值給原元素。
完整代碼
<!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">
<title>共享服務列表</title>
<style>
.option_box{
display:none; //先把下拉菜單隱藏，點擊時再顯示
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body class="f-df">
<div class="u_select f-dfa">
<div class="select_box">
<span class="ctt" id="idoGradeType">組別</span>
<img class="arrow" alt="">
</div>
<ul class="option_box">
<li class="option">進行中</li>
<li class="option">加分項</li>
<li class="option">減分項</li>
</ul>
</div>
<script>
$(".u_select").click(function () {
event.stopPropagation();
$(this).children(".option_box").fadeToggle(200);
});
$(".u_select").on("click", ".option", function () {
$(this).parent().siblings(".select_box").find(".ctt").text($(this).text())
})
$(document).click(function () {
$(".option_box").fadeOut();
});
</script>
</body>
</html>
$(".u_select").click(function () {
event.stopPropagation();
$(this).children(".option_box").fadeToggle(200);
});
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換，即在淡入、淡出之間切換。
即點擊 <div class="select_box"> 時，它的子元素中的 <ul class="option_box"> 在淡入和淡出之間切換，
event.stopPropagation(); 阻止事件的冒泡方法，不讓事件向documen上蔓延，如果不加這個，下拉菜單會不停的淡入淡出。
$(".u_select").on("click", ".option", function () {
$(this).parent().siblings(".select_box").find(".ctt").text($(this).text())
})
$(".u_select").on("click", ".option", function (){}，意思是在點擊 ".u_select" 時，對 ".option" 進行操作，
所以方法中的 $(this) 指的就是 ".u_select"，
siblings()列出所有兄弟元素（不含自身），siblings(".select_box") 即兄弟元素中的 ".select_box"，
text( $(this).text() ) 即將當前元素(".option")的 text 賦值給所選元素(".ctt")的 text。
$(document).click(function () {
$(".option_box").fadeOut();
});
點擊頁面任何位置，".option_box"都會淡出。