선택 옵션에서 체크 박스를 사용하는 방법
클라이언트는 목록의 개별 항목으로 항목 이름과 함께 확인란이 포함 된 옵션 선택 메뉴가있는 디자인을 제공했습니다. 어쨌든 옵션 선택 메뉴 안에 확인란을 추가 할 수 있습니까?
주의 : 개발자는 메뉴를 효과적으로 만들기 위해 자신의 ID를 추가해야합니다. 가능한 경우 HTML CSS 코드 만 필요합니다.
선택 요소 내부에 체크 박스를 배치 할 수 없지만 HTML, CSS 및 JavaScript를 사용하여 동일한 기능을 얻을 수 있습니다. 다음은 가능한 작업 솔루션입니다. 설명은 다음과 같습니다.
암호:
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</form>설명:
처음에는 "옵션 선택"이라는 텍스트를 표시하는 선택 요소와 선택 요소 ( <div class="overSelect">) 를 덮는 (겹치는) 빈 요소를 만듭니다. 사용자가 선택 요소를 클릭하는 것을 원하지 않습니다. 빈 옵션이 표시됩니다. 요소를 다른 요소와 겹치려면 상대적인 값이있는 CSS 위치 속성을 사용합니다. 순수한.
기능을 추가하기 위해 사용자가 선택 요소 ( <div class="selectBox" onclick="showCheckboxes()">) 가 포함 된 div를 클릭 할 때 호출되는 JavaScript 함수를 지정합니다 .
또한 체크 박스가 포함 된 div를 만들고 CSS를 사용하여 스타일을 지정합니다. 위에서 언급 한 JavaScript 함수 <div id="checkboxes">는 CSS 표시 속성 값을 "none"에서 "block"으로 또는 그 반대로 변경합니다.
이 솔루션은 Internet Explorer 10, Firefox 34, Chrome 39에서 테스트되었습니다. 브라우저에 JavaScript가 활성화되어 있어야합니다.
추가 정보:
CSS 위치
http://www.w3schools.com/css/css_positioning.asp
CSS 표시 속성
http://www.w3schools.com/cssref/pr_class_display.asp
지금까지 최고의 플러그인은 Bootstrap Multiselect입니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Multi Select Dropdown with Checkboxes</title>
<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
</head>
<body>
<form id="form1">
<div style="padding:20px">
<select id="chkveg" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
<script type="text/javascript">
$(function() {
$('#chkveg').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function(){
alert($('#chkveg').val());
});
});
</script>
</div>
</form>
</body>
</html>
여기 데모입니다
A의 순수한 CSS의 방법, 당신은 사용할 수 있습니다 :checked과 함께 선택 ::before조건 내용을 인라인 선택합니다.
요소에 클래스 select-checkbox를 추가하고 select다음 CSS를 포함 하기 만하면 됩니다.
.select-checkbox option::before {
content: "\2610";
width: 1.3em;
text-align: center;
display: inline-block;
}
.select-checkbox option:checked::before {
content: "\2611";
}
다음과 같이 일반 이전 유니 코드 문자 ( 이스케이프 된 16 진수 인코딩 사용 )를 사용할 수 있습니다.
또는 멋지게 꾸미고 싶다면 다음 FontAwesome 글리프를 사용할 수 있습니다.
.fa 평방 - 오 -\f096
.fa 검사 평방 - 오 -\f046
jsFiddle 및 Stack Snippets의 데모
select {
width: 150px;
}
.select-checkbox option::before {
content: "\2610";
width: 1.3em;
text-align: center;
display: inline-block;
}
.select-checkbox option:checked::before {
content: "\2611";
}
.select-checkbox-fa option::before {
font-family: FontAwesome;
content: "\f096";
width: 1.3em;
display: inline-block;
margin-left: 2px;
}
.select-checkbox-fa option:checked::before {
content: "\f046";
}<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<h3>Unicode</h3>
<select multiple="" class="form-control select-checkbox" size="5">
<option>Dog</option>
<option>Cat</option>
<option>Hippo</option>
<option>Dinosaur</option>
<option>Another Dog</option>
</select>
<h3>Font Awesome</h3>
<select multiple="" class="form-control select-checkbox-fa" size="5">
<option>Dog</option>
<option>Cat</option>
<option>Hippo</option>
<option>Dinosaur</option>
<option>Another Dog</option>
</select>참고 : 그러나 IE 호환성 문제에주의하십시오 .
다중 선택을 시도 하십시오 . 수많은 예제와 함께 훨씬 깨끗하고 관리되는 솔루션으로 보입니다.
나는 @vitfo 대답에서 시작했지만 확인란 입력 대신 <option>안에 <select>넣고 싶습니다. 그래서 이것을 만들기 위해 모든 대답을 모았습니다. 내 코드가 있습니다. 누군가를 도울 수 있기를 바랍니다.
$(".multiple_select").mousedown(function(e) {
if (e.target.tagName == "OPTION")
{
return; //don't close dropdown if i select option
}
$(this).toggleClass('multiple_select_active'); //close dropdown if click inside <select> box
});
$(".multiple_select").on('blur', function(e) {
$(this).removeClass('multiple_select_active'); //close dropdown if click outside <select>
});
$('.multiple_select option').mousedown(function(e) { //no ctrl to select multiple
e.preventDefault();
$(this).prop('selected', $(this).prop('selected') ? false : true); //set selected options on click
$(this).parent().change(); //trigger change event
});
$("#myFilter").on('change', function() {
var selected = $("#myFilter").val().toString(); //here I get all options and convert to string
var document_style = document.documentElement.style;
if(selected !== "")
document_style.setProperty('--text', "'Selected: "+selected+"'");
else
document_style.setProperty('--text', "'Select values'");
});:root
{
--text: "Select values";
}
.multiple_select
{
height: 18px;
width: 90%;
overflow: hidden;
-webkit-appearance: menulist;
position: relative;
}
.multiple_select::before
{
content: var(--text);
display: block;
margin-left: 5px;
margin-bottom: 2px;
}
.multiple_select_active
{
overflow: visible !important;
}
.multiple_select option
{
display: none;
height: 18px;
background-color: white;
}
.multiple_select_active option
{
display: block;
}
.multiple_select option::before {
content: "\2610";
}
.multiple_select option:checked::before {
content: "\2611";
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myFilter" class="multiple_select" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>You can use this library on git for this purpose https://github.com/ehynds/jquery-ui-multiselect-widget
for initiating the selectbox use this
$("#selectBoxId").multiselect().multiselectfilter();
and when you have the data ready in json (from ajax or any method), first parse the data & then assign the js array to it
var js_arr = $.parseJSON(/*data from ajax*/);
$("#selectBoxId").val(js_arr);
$("#selectBoxId").multiselect("refresh");
Use this code for checkbox list on option menu.
.dropdown-menu input {
margin-right: 10px;
} <div class="btn-group">
<a href="#" class="btn btn-primary"><i class="fa fa-cogs"></i></a>
<a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu" style="padding: 10px" id="myDiv">
<li><p><input type="checkbox" value="id1" > OA Number</p></li>
<li><p><input type="checkbox" value="id2" >Customer</p></li>
<li><p><input type="checkbox" value="id3" > OA Date</p></li>
<li><p><input type="checkbox" value="id4" >Product Code</p></li>
<li><p><input type="checkbox" value="id5" >Name</p></li>
<li><p><input type="checkbox" value="id6" >WI Number</p></li>
<li><p><input type="checkbox" value="id7" >WI QTY</p></li>
<li><p><input type="checkbox" value="id8" >Production QTY</p></li>
<li><p><input type="checkbox" value="id9" >PD Sr.No (from-to)</p></li>
<li><p><input type="checkbox" value="id10" > Production Date</p></li>
<button class="btn btn-info" onClick="showTable();">Go</button>
</ul>
</div>Alternate Vanilla JS version with click outside to hide checkboxes:
let expanded = false;
const multiSelect = document.querySelector('.multiselect');
multiSelect.addEventListener('click', function(e) {
const checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
e.stopPropagation();
}, true)
document.addEventListener('click', function(e){
if (expanded) {
checkboxes.style.display = "none";
expanded = false;
}
}, false)
I'm using addEventListener instead of onClick in order to take advantage of the capture/bubbling phase options along with stopPropagation(). You can read more about the capture/bubbling here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
The rest of the code matches vitfo's original answer (but no need for onclick() in the html). A couple of people have requested this functionality sans jQuery.
다음은 코드 펜 예제입니다. https://codepen.io/davidysoards/pen/QXYYYa?editors=1010
옵션 목록이 AJAX 호출로 업데이트되기 전에 multiselect.js 파일을로드 할 수 있으므로 multiselect.js 파일을 실행하는 동안 다중 선택 기능을 적용하기위한 빈 옵션 목록이 있습니다. 따라서 먼저 AJAX 호출로 옵션 목록을 업데이트 한 다음 다중 선택 호출을 시작하면 동적 옵션 목록이있는 드롭 다운 목록이 표시됩니다.
이것이 당신을 도울 수 있기를 바랍니다.
다중 선택 드롭 다운 목록 및 관련 js 및 css 파일
// This function should be called while loading page
var loadParentTaskList = function(){
$.ajax({
url: yoururl,
method: 'POST',
success: function(data){
// To add options list coming from AJAX call multiselect
for (var field in data) {
$('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');
}
// To initiate the multiselect call
$("#parent_task").multiselect({
includeSelectAllOption: true
})
}
});
}// Multiselect drop down list with id parent_task
<select id="parent_task" multiple="multiple">
</select>클래스 생성 div를 추가하고 클래스 양식 제어를 추가하십시오. iam은 JSP, boostrap4를 사용합니다. c : foreach는 무시하십시오.
<div class="multi-select form-control" style="height:107.292px;">
<div class="checkbox" id="checkbox-expedientes">
<c:forEach var="item" items="${postulantes}">
<label class="form-check-label">
<input id="options" class="postulantes" type="checkbox" value="1">Option 1</label>
</c:forEach>
</div>
</div>
참고 URL : https://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option
'code' 카테고리의 다른 글
| CHM 파일을 열면 "웹 페이지 탐색이 취소되었습니다."가 생성됩니다. (0) | 2020.09.20 |
|---|---|
| Vim에서 2 칸 들여 쓰기를 4 칸 들여 쓰기로 변경 (0) | 2020.09.20 |
| Scala 특성에서 val 또는 def를 언제 사용합니까? (0) | 2020.09.19 |
| root 사용자를 제외하고 'test'@ 'localhost'사용자 (암호 사용 : YES)에 대한 액세스가 거부되었습니다. (0) | 2020.09.19 |
| const void 란 무엇입니까? (0) | 2020.09.19 |