Cách sử dụng Hộp kiểm bên trong Chọn tùy chọn

94

Khách hàng đã đưa cho tôi một thiết kế có menu Lựa chọn Tùy chọn chứa hộp kiểm cùng với tên mục như các mục riêng lẻ trong danh sách. Vẫn có thể thêm hộp kiểm bên trong menu Chọn Tùy chọn?

NB: Nhà phát triển cần thêm id của riêng mình để làm cho menu hiệu quả, tôi chỉ cần mã HTML CSS nếu có thể.

javascript  html  css  html-select 
— Anh hùng Trà
nguồn
5
"Tôi chỉ cần mã HTML CSS nếu nó có thể nào" ... vâng, có thể ... bạn sẽ chỉ cần mã nó một mình hoặc google nó
— fmodos
5
@fmodos Có thể không? Hãy ném chúng tôi một bản demo, và OP - kiểm tra này ra ... Nó không phải là có thể với CSS và HTML chỉ
— Ông Alien
Vui lòng đọc bài đăng này 1stwebdesigns.com/blog/development/…
— kuldeep raj
@ Mr.Alien tôi bỏ lỡ hiểu ... Tôi nghĩ rằng ông đã yêu cầu cho một thành phần "có thể" được HTML CSS và không phải là "có" là chỉ "HTML CSS" ... xấu của tôi: /
— fmodos

Câu trả lời:

188

Bạn không thể đặt hộp kiểm bên trong phần tử được chọn nhưng bạn có thể có được chức năng tương tự bằng cách sử dụng HTML, CSS và JavaScript. Đây là một giải pháp khả thi. Lời giải thích sau đây.

nhập mô tả hình ảnh ở đây

Mã:

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>
Mở rộng đoạn mã

Giải trình:

Lúc đầu, chúng tôi tạo một phần tử chọn hiển thị văn bản "Chọn một tùy chọn" và phần tử trống che (chồng lên) phần tử chọn ( <div class="overSelect">). Chúng tôi không muốn người dùng nhấp vào phần tử chọn - nó sẽ hiển thị một tùy chọn trống. Để chồng chéo phần tử với phần tử khác, chúng tôi sử dụng thuộc tính CSS position với giá trị tương đối | tuyệt đối.

Để thêm chức năng, chúng tôi chỉ định một hàm JavaScript được gọi khi người dùng nhấp vào div có chứa phần tử select của chúng tôi ( <div class="selectBox" onclick="showCheckboxes()">).

Chúng tôi cũng tạo div chứa các hộp kiểm của chúng tôi và tạo kiểu cho nó bằng cách sử dụng CSS. Hàm JavaScript được đề cập ở trên chỉ thay đổi <div id="checkboxes">giá trị của thuộc tính hiển thị CSS từ "none" thành "block" và ngược lại.

Giải pháp đã được thử nghiệm trên các trình duyệt sau: Internet Explorer 10, Firefox 34, Chrome 39. Trình duyệt này cần phải bật JavaScript.

Thêm thông tin:

Định vị CSS

Cách chồng một div lên trên một div khác

http://www.w3schools.com/css/css_positioning.asp

Thuộc tính hiển thị CSS

http://www.w3schools.com/cssref/pr_class_display.asp

— vitfo
nguồn
1
FYI: Giải pháp này sẽ cần nhiều nỗ lực hơn nếu cần sửa đổi nhiều hơn một danh sách lựa chọn. Tôi khuyên bạn nên sử dụng một số plugin được duy trì tích cực.
làm thế nào để lấy giá trị của các hộp kiểm đã chọn? Câu trả lời rất hay nhưng sẽ rất hữu ích nếu bạn cung cấp plnkr hoặc thứ gì đó tương tự.
— Pardeep Jain
7
cũng để chọn hộp không biến mất khi người dùng chọn bất kỳ tùy chọn nào
— Pardeep Jain
1
Câu trả lời này là tuyệt vời và nó đã làm việc cho tôi. Tuy nhiên, có một cải tiến mà tôi đã thực hiện trên nó. Thay vì overselectdiv có thể gây ra một số vấn đề trong một giao diện phức tạp mà tôi đã sử dụng <option selected hidden>Select an option</option>. Nó có thể không phải là cách sử dụng tốt nhất hiddennhưng nó hoạt động.
— Syknapse
2
nhưng làm thế nào để ẩn danh sách thả xuống, khi chúng ta nhấp vào bên ngoài?
— saurabh kumar
57

Plugin tốt nhất cho đến nay là 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>

Đây là DEMO

$(function() {

  $('#chkveg').multiselect({
    includeSelectAllOption: true
  });

  $('#btnget').click(function() {
    alert($('#chkveg').val());
  });
});
.multiselect-container>li>a>label {
  padding: 4px 20px 3px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link href="https://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="https://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="https://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>

<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" />
  </div>
</form>
Mở rộng đoạn mã

— pmrotule
nguồn
1
Bạn không cần phải sử dụng nhiều thư viện này cho giải pháp của mình. Bạn chỉ có thể sử dụng tùy chọn Nhiều lựa chọn HTML thông thường. Cảm ơn!
— Power Star
3
Tôi biết tôi có thể sử dụng tùy chọn nhiều lựa chọn HTML, nhưng tôi thấy nó xấu xí và không thân thiện với người dùng.
— pmrotule
4
Tôi thích hành vi của plugin này, nhưng muốn sử dụng nó mà không cần bootstrap ... bất cứ thứ gì tương tự?
— singpolyma
plugin này rất lỗi ... họ có 150 vấn đề mở và người bảo trì nói rằng anh ta không có thời gian. như vậy sau khi một số vấn đề tôi chuyển sang câu trả lời được chấp nhận và vue
— Oleg Abrazhaev
1
@Erbureth Các đường dẫn tập lệnh / biểu định kiểu bên ngoài đã lỗi thời trong bản trình diễn (liên kết chết). Tôi đã cập nhật các url để sửa nó.
— pmrotule
18

Đối với cách tiếp cận CSS thuần túy , bạn có thể sử dụng :checkedbộ chọn kết hợp với ::beforebộ chọn để nội dòng nội dung có điều kiện.

Chỉ cần thêm lớp select-checkboxvào selectphần tử của bạn và bao gồm CSS sau:

.select-checkbox option::before {
  content: "\2610";
  width: 1.3em;
  text-align: center;
  display: inline-block;
}
.select-checkbox option:checked::before {
  content: "\2611";
}

Bạn có thể sử dụng các ký tự unicode cũ thuần túy (với mã hóa hex thoát ) như sau:

Hoặc nếu bạn muốn thêm gia vị, bạn có thể sử dụng các ký hiệu FontAwesome này

Ảnh chụp màn hình

Demo trong jsFiddle & Stack Snippets

Hiển thị đoạn mã

Lưu ý : Tuy nhiên, hãy cẩn thận với các vấn đề tương thích với IE

— KyleMit
nguồn
1
Đó là một vấn đề khi các multiplethuộc tính làm cho <select>cái nhìn giống như một hộp thay vì một danh sách thả xuống ...
— vsync
@vsync, bạn có thể giải thích rõ vấn đề bạn đang gặp phải không, thậm chí có thể bẻ khóa và bao gồm ảnh chụp màn hình. Mục tiêu ở đây là áp dụng cho một <select multiple>phần tử, vì vậy đó phải là trường hợp sử dụng dự kiến. Các bộ chọn CSS phải cụ thể để áp dụng lớp đó để bạn quyết định sử dụng trên các yếu tố cá nhân bằng cách áp dụng các .select-checkboxlớp
— KyleMit
1
Thực sự khuyên bạn nên sử dụng giải pháp thanh lịch này nếu bạn đang tìm kiếm một cách tiếp cận CSS thuần túy.
— Anish Sana
@KyleMit Giải pháp tuyệt vời !!! nhưng vấn đề là nếu tôi muốn chọn nhiều mục thì tôi phải sử dụng nút Ctrl giống như phần tử chọn đơn giản.
— Lalit Rajput
@LalitRajput, chắc chắn, là Thiết kế tương tác mặc định cho tất cả các điều khiển nhiều lựa chọn trong tất cả các trình duyệt. Tôi đồng ý rằng nó thuộc loại linh tinh hoặc không trực quan. Bạn luôn có thể tìm cách ghi đè hành vi mặc định đó nếu bạn muốn. Làm thế nào để tránh phải nhấp ctrl trong hộp nhiều lựa chọn bằng cách sử dụng Javascript? - xem fiddle cập nhật này
— KyleMit
14

Thử nhiều lựa chọn , đặc biệt là nhiều mục . Có vẻ như là một giải pháp quản lý và sạch sẽ, với rất nhiều ví dụ. Bạn cũng có thể xem nguồn.

<div>
  <div class="form-group row">
    <label class="col-sm-2">
      Basic Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple">
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2">
      Group Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple">
        <optgroup label="Group 1">
          <option value="1">1</option>
          <option value="2">2</option>
        </optgroup>
        <optgroup label="Group 2">
          <option value="6">6</option>
          <option value="7">7</option>
        </optgroup>
        <optgroup label="Group 3">
          <option value="11">11</option>
          <option value="12">12</option>
        </optgroup>
      </select>
    </div>
  </div>
</div>

<script>
  $(function() {
    $('select').multipleSelect({
      multiple: true,
      multipleWidth: 60
    })
  })
</script>
— Azghanvi
nguồn
Mặc dù liên kết này có thể trả lời câu hỏi, nhưng tốt hơn hết bạn nên đưa các phần thiết yếu của câu trả lời vào đây và cung cấp liên kết để tham khảo. Các câu trả lời chỉ có liên kết có thể trở nên không hợp lệ nếu trang được liên kết thay đổi. - Từ đánh giá
— Justin Lessard
8

Tôi bắt đầu từ câu trả lời @vitfo nhưng tôi muốn có <option>bên trong <select>thay vì đầu vào hộp kiểm vì vậy tôi đã tổng hợp tất cả các câu trả lời để tạo ra điều này, có mã của tôi, tôi hy vọng nó sẽ giúp được ai đó.

$(".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>
Mở rộng đoạn mã

— pavelbere
nguồn
6

Phiên bản Vanilla JS thay thế với nhấp chuột bên ngoài để ẩn hộp kiểm:

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)

Tôi đang sử dụng addEventListener thay vì onClick để tận dụng các tùy chọn giai đoạn bắt / tạo bọt cùng với stopPropagation (). Bạn có thể đọc thêm về cách bắt / tạo bọt tại đây: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Phần còn lại của mã khớp với câu trả lời ban đầu của vitfo (nhưng không cần onclick () trong html). Một vài người đã yêu cầu chức năng này sans jQuery.

Đây là ví dụ về codepen https://codepen.io/davidysoards/pen/QXYYYa?editors=1010

— davidysoards
nguồn
2

Bạn có thể sử dụng thư viện này trên git cho mục đích này https://github.com/ehynds/jquery-ui-multiselect-widget

để bắt đầu hộp chọn, hãy sử dụng cái này

    $("#selectBoxId").multiselect().multiselectfilter();

và khi bạn có sẵn dữ liệu trong json (từ ajax hoặc bất kỳ phương thức nào), trước tiên hãy phân tích cú pháp dữ liệu và sau đó gán mảng js cho nó

    var js_arr = $.parseJSON(/*data from ajax*/);
    $("#selectBoxId").val(js_arr);
    $("#selectBoxId").multiselect("refresh");
— Jaya Parwani
nguồn
2

Sử dụng mã này cho danh sách hộp kiểm trên menu tùy chọn.

.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>
Mở rộng đoạn mã

— Rupesh Wankhede
nguồn
Đối với một đầy đủ fleshed ra ví dụ về cách tiếp cận cơ bản này xây dựng một dropdown-menuvới các yếu tố ô trống trong mỗi hàng, đây là một câu trả lời cho việc đưa hộp kiểm trong một dropdown Bootstrap
— KyleMit
1

Bạn có thể đang tải tệp multiselect.js trước khi danh sách tùy chọn được cập nhật bằng lệnh gọi AJAX, do đó trong khi thực thi tệp multiselect.js sẽ có danh sách tùy chọn trống để áp dụng chức năng đa lựa chọn. Vì vậy, trước tiên hãy cập nhật danh sách tùy chọn bằng lệnh gọi AJAX sau đó bắt đầu cuộc gọi đa lựa chọn, bạn sẽ nhận được danh sách thả xuống với danh sách tùy chọn động.

Hy vọng rằng cái này sẽ giúp đc bạn.

Danh sách thả xuống nhiều lựa chọn và các tệp js & css liên quan

// 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>
Mở rộng đoạn mã

— Yaswini Modupalli
nguồn
0

Nếu bạn muốn tạo nhiều danh sách thả xuống được chọn trong cùng một trang:

.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;
}

Html:

 <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>
<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>

Sử dụng Jquery:

 function showCheckboxes(elethis) {
        if($(elethis).next('#checkboxes').is(':hidden')){
            $(elethis).next('#checkboxes').show();
            $('.selectBox').not(elethis).next('#checkboxes').hide();  
        }else{
            $(elethis).next('#checkboxes').hide();
            $('.selectBox').not(elethis).next('#checkboxes').hide();
        }
 }
— Ashish
nguồn
-2

Chỉ thêm lớp tạo div và thêm điều khiển biểu mẫu lớp. Tôi sử dụng JSP, boostrap4. Bỏ qua 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>
— Juan Silupú Maza
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.