下拉多选框

1.最终结果

 2.jsp代码

              <tr>
			<td>公告接收:</td>
			<td>
				<input type="radio" id="allreceive" name="allreceive" value="1">所有人
				<input type="radio" id="allreceive" name="allreceive" value="2">部分人
			
			</td>
		</tr>	
		<tr id="persion" style="display:none">
			<td>发送人:</td>
			<td>			
				<div id="jquery-script-menu">
					<input id="result-recipientid" name="recipientid" type="text"  style="display: none;"  value="">	
		    		<select  id="recipientid" class="form-control"  multiple="multiple" style="display: none;">
						 <c:forEach var="u" items="${user}">
							<option value="${u.userid}">${u.username }</option>
						</c:forEach> 	
					</select>
				</div>
			</td>
			
		</tr>		

 3.公告接收：点击所有人不出现下拉框，点击部分人出现下拉框，进行选择

实现这点击按钮出现下拉框的代码如下：

$(":radio").click(function(){
		var radio = $("input[type='radio']:checked").val();
		console.log(radio)
		if(radio=='2'){
			$("#persion").show()
		}else{
			$("#persion").hide()
			
		}
	})

还需要另写一个script放展示下拉框功能

<script>$("#recipientid").bsMultiSelect();</script> 

另外要实现这些功能，还需要引入相关的js文件，这里也许需要引入bootstrap.min.css,bootstrap.min.js 这里的公共js中包含了，所以不在引用

<link rel="stylesheet" href="${pageContext.request.contextPath}/views/js/bootstrap-4.1.0/BsMultiSelect.css">
<script src="${pageContext.request.contextPath}/views/js/bootstrap-4.1.0/popper.min.js" ></script>



<script src="${pageContext.request.contextPath}/views/js/bootstrap-4.1.0/BsMultiSelect.js"></script>

4.在提交时，将所选的值，提交过去

$("#btn_submit").bind("click",function() {
		var userids="";
		$("input[type='checkbox']:checked").each(
			function(){
				userids += $(this).attr('id').replace('dashboardcode-bsmultiselect--generated-id-','')+","
			}
		);
		$("#result-recipientid").val(userids)
		$("#addNoticeForm").submit();
	});