rita
/
CoffeeProject_SourceCode_ERROR


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aisky-coffee</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <style>

        /*多選下拉框樣式（根據自己的樣式調整）*/

        .dropdown_item{

            width: 100%;

        }


        .dropdown_item>li:HOVER{

            background-color: #eee;

            cursor: pointer;

        }


        .dropdown_item>li {

            display: block;

            padding: 3px 10px;

            clear: both;

            font-weight: normal;

            line-height: 1.428571429;

            color: #333;

            white-space: nowrap;

        }


        .dropdown_item>li>.check_box{

            width: 18px;

            height: 18px;

            vertical-align: middle;

            margin: 0px;

        }


        .dropdown_item>li>span{

            vertical-align: middle;

        }


        .select_multiple .caret{

            border-top: 4px solid!important;

            border-bottom: 0;

        }

    </style>

    <script>

        //多選下拉框實現

    $(document).on("click",".check_box",function(event){

		event.stopPropagation();//阻止事件冒泡，防止觸發li的點選事件

		//勾選的項

		var $selectTextDom=$(this).parent().parent("ul").siblings("button").children(".select_text");

		//勾選項的值

		var $selectValDom=$(this).parent().parent("ul").siblings(".select_val");

		//是否有選擇項了

		var isSelected=$selectTextDom[0].getAttribute("data-is-select");

		var selectText="";//文字值，用於顯示

		var selectVal=$selectValDom.val();//實際值，會提交到後臺的

		var selected_text=$(this).siblings("span").text();//當次勾選的文字值

		var selected_val=$(this).val();//當次勾選的實際值

		//判斷是否選擇過

		if(isSelected=="true"){

			selectText=$selectTextDom.text();

		}

		if(selectText!=""){

			if(selectText.indexOf(selected_text)>=0){//判斷是否已經勾選過

				selectText=selectText.replace(selected_text,"").replace(",,",",");//替換掉

				selectVal=selectVal.replace(selected_val,"").replace(",,",",");//替換掉

				//判斷最後一個字元是否是逗號

				if(selectText.charAt(selectText.length - 1)==","){

					//去除末尾逗號

					selectText=selectText.substring(0,selectText.length - 1);

					selectVal=selectVal.substring(0,selectVal.length - 1);

				}

			}else{

				selectText+=","+selected_text;

				selectVal+=","+selected_val;

			}

		}else{

			selectText=selected_text;

			selectVal=selected_val;

		}

		$selectTextDom.text(selectText);

		$selectValDom.val(selectVal);

		if(selectText==""){

			$selectTextDom.text("請選擇");

			$selectTextDom[0].setAttribute("data-is-select","false");

		}else{

			$selectTextDom[0].setAttribute("data-is-select","true");

		}

	})

    </script>

</head>
<body>
<div class="dropup" style="position: relative;">
	<button class="btn btn-default dropdown-toggle form-control select_multiple" style="width: 20%;margin-left: 0px;" type="button" id="dropdownMenu21" data-toggle="dropdown">
    	<span class="select_text" data-is-select="false">Dro pup</span>
    	<span class="caret"></span>
  	</button>
  	<ul class="dropdown-menu dropdown_item" style="bottom: auto;">
    	<li><input type="checkbox" class="check_box" value="aa" /> <span>Action</span></li>
    	<li><input type="checkbox" class="check_box" value="bb"/> <span>Another action</span></li>
    	<li><input type="checkbox" class="check_box" value="cc"/> <span>Something else here</span></li>
    	<li><input type="checkbox" class="check_box" value="dd"/> <span>Separated link</span></li>
  	</ul><!-- 為了方便演示，type設定text了，實際中可以設定成hidden -->
	<input type="hidden" name="" class="select_val"/>
</div>

<select>
    <!--<option>-->
    <!--<ul class="dropdown-menu dropdown_item" style="bottom: auto;">-->
    	<!--<li><input type="checkbox" class="check_box" value="aa" /> <span>Action</span></li>-->
    	<!--<li><input type="checkbox" class="check_box" value="bb"/> <span>Another action</span></li>-->
    	<!--<li><input type="checkbox" class="check_box" value="cc"/> <span>Something else here</span></li>-->
    	<!--<li><input type="checkbox" class="check_box" value="dd"/> <span>Separated link</span></li>-->
  	<!--</ul>&lt;!&ndash; 為了方便演示，type設定text了，實際中可以設定成hidden &ndash;&gt;-->
    <!--</option>-->
    <option>red</option>
</select>
</body>
</html>