下拉選單多選

阿新 • • 發佈：2020-12-22

技術標籤：jquery

下拉選單多選

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{width: 500px;height: 500px;margin: 0 auto;font-size: 12px;}
			.select_more{width: 100px;height: 20px;position: relative; 
border-color: #a2bac0 #b8d0d6 #b8d0d6 #a2bac0;border-style: solid;border-width: 1px;cursor: default;}
			.select_option_box{position: absolute;left: -1px;top: 19px;width: 100%;z-index: 1;background-color: #FFFFFF;border-color: #a2bac0 #b8d0d6 #b8d0d6 #a2bac0;border-style: solid;border-width: 1px;border-top: none; 
display: none;cursor: default;}
			.select_item{width: 100%;line-height: 20px;padding: 1px 5px;box-sizing: border-box;}
			.select_item input,.select_item span{display: inline-block;vertical-align: top;}
			.select_item input{margin: 0;margin-right: 3px;margin-top: 3.5px;}
			.select_item span{line-height 
: 23px;}
			.select_checked{height: 20px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
		</style>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var checkedIds = [], checkedArr = [];
				// 監測崗位名稱選擇
			  $(".select_item").each(function(e) {
					$(this).click(function(e) {
						e.stopPropagation(); // 神龍點睛之筆!!!!!
						if($(this).find('input').attr('checked')) {
							$(this).find('input').removeAttr('checked');
							// 刪除
							checkedArr.splice(checkedArr.indexOf($(this).find('span').text()), 1);
							checkedIds.splice(checkedIds.indexOf($(this).find('input').val()), 1);
							$('#selectChecked').text(checkedArr)
							$('#checkedStr').val(checkedIds);
							if(checkedArr.length == 0) {
								$('#selectChecked').text('請選擇')
							}
						}else {
							if($(this).find('span').text() != '請選擇' && $(this).find('span').text()) {
								$(this).find('input').attr('checked', 'checked')
								//新增
								checkedArr.push($(this).find('span').text());
								checkedIds.push($(this).find('input').val());
								$('#selectChecked').text(checkedArr)
								$('#checkedStr').val(checkedIds);
							}
						}
					})
				})
				//崗位名稱請選擇點選事件
				$('#selectChecked').click(function(){
					if($('#selectBox').css('display') == 'block') {
						$('#selectBox').css('display', 'none');
					}else {
						$('#selectBox').css('display', 'block');
					}
				})
				// 點選其他地方select消失
				$('#body').click(function() {
					 $('#selectBox').css('display', 'none');
				})
			})
		</script>
	</head>
	<body id="body">
		<div class="box">
			<input type="text" name="" id="checkedStr" value="" />
			<div class="select_more">
				<div class="select_item select_checked" id="selectChecked">請選擇</div>
				<div class="select_option_box" id="selectBox">
					<div class="select_item">
						<input type="checkbox" value="1" /><span>團隊經理</span>
					</div>
					<div class="select_item">
						<input type="checkbox" value="2" /><span>業務管理</span>
					</div>
					<div class="select_item">
						<input type="checkbox" value="3" /><span>綜合事務</span>
					</div>
					<div class="select_item">
						<input type="checkbox" value="4" /><span>授權審批</span>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

下拉選單多選

技術標籤：jquery 下拉選單多選 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

excel建立下拉列表多選_如何在Excel中建立下拉列表？

excel建立下拉列表多選 Excel provides the drop-down list in order to provide multiple options to select one. The drop-down list can be created in different ways and options. In this tutori

vue 下拉框多選校驗問題

技術標籤：vueweb前端multiplevue 最近發現下拉框多選（multiple）時，一開始進頁面就會觸發驗證，顯然是不友好的。

下拉列表多選框計算選中的值相加求和

html程式碼 <div class="form-group"> <label class="control-label col-xs-12 col-sm-2">物業費:</label>

elementui下拉框多選報[Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞

技術標籤：VUEjQuery/jselementUI下拉框多選 elementui下拉框多選，選值報錯選中一個值後所有的值都會被選中

select下拉搜尋多選搜尋

在使用select下拉框進行的時候，有時候我們會使用到下拉搜尋的功能或者是搜尋多選的功能，這時候layui、element都有相應的框架，但當我們不想使用或者專案有限制無法使用的時候，以下我提供了select2的下拉功能：

vue+elementui實現下拉表格多選和搜尋功能

本文例項為大家分享了+elementui實現下拉表格多選和搜尋的具體程式碼，供大家參考，具體內容如下

VUE element ui根據陣列生成多個互不干擾的下拉選單並獲取對應引數

直接放效果圖和程式碼效果圖：　　1.預設初始效果　　2.選擇後效果程式碼 <template>

vue 表格中的下拉框單選、多選處理

最近在用vue做前後端分離，需要在表格中用到下拉框，由於需求變動，從最開始的單選變為多選，折騰了許久，記錄一下，供後人鋪路

iview中的Dropdown（下拉選單）包括預設引數的多引數傳遞

技術標籤：問題記錄javascripthtml5vue.js <Dropdown trigger="click" @on-click="confirmtype($event,row)">

element下拉選單 command 傳遞多個值

技術標籤：elementcommand傳值vue element 的下拉選單 command 傳遞多個值核心程式碼：

element-ui Dropdown Events 點選下拉選單後觸發事件的設定

頁面結構 <el-dropdown @command=\"handleCommand\"><span class=\"el-dropdown-link\" ><el-avatar class=\"user_avatar\" :src=\"this.$store.state.user_avatar\"></el-avatar></spa