Cara menggunakan Kotak Centang di dalam Opsi Pilihan

Question 1

Klien telah memberi saya desain yang memiliki menu Opsi Pilihan yang berisi kotak centang bersama dengan nama item sebagai item individual dalam daftar. Apakah ada kemungkinan untuk menambahkan kotak centang di dalam menu Pilih Opsi?

NB: Pengembang perlu menambahkan id sendiri untuk membuat menu efektif, saya hanya perlu kode HTML CSS jika memungkinkan.

Question 2

Anda tidak dapat menempatkan kotak centang di dalam elemen pilih tetapi Anda bisa mendapatkan fungsi yang sama dengan menggunakan HTML, CSS dan JavaScript. Berikut adalah solusi kerja yang mungkin. Berikut penjelasannya.

masukkan deskripsi gambar di sini

Kode:

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>

Luaskan cuplikan

Penjelasan:

Pertama kita membuat elemen pilih yang menampilkan teks "Pilih opsi", dan elemen kosong yang menutupi (tumpang tindih) elemen pilih ( <div class="overSelect">). Kami tidak ingin pengguna mengklik elemen pilih - ini akan menampilkan opsi kosong. Untuk tumpang tindih elemen dengan elemen lain kami menggunakan properti posisi CSS dengan nilai relatif | mutlak.

Untuk menambahkan fungsionalitas kita menetapkan fungsi JavaScript yang dipanggil saat pengguna mengklik div yang berisi elemen pilih kita ( <div class="selectBox" onclick="showCheckboxes()">).

Kami juga membuat div yang berisi kotak centang kami dan menatanya menggunakan CSS. Fungsi JavaScript yang disebutkan di atas hanya mengubah <div id="checkboxes">nilai properti tampilan CSS dari "tidak ada" menjadi "blok" dan sebaliknya.

Solusinya telah diuji di browser berikut: Internet Explorer 10, Firefox 34, Chrome 39. Browser harus mengaktifkan JavaScript.

Informasi lebih lanjut:

Posisi CSS

Cara melapisi satu div di atas div lainnya

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

Properti tampilan CSS

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

Question 3

Plugin terbaik sejauh ini adalah 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>

Inilah DEMO tersebut

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

Luaskan cuplikan

Question 4

Untuk pendekatan CSS Murni , Anda dapat menggunakan :checkedselektor yang digabungkan dengan ::beforeselektor untuk menyebariskan konten bersyarat.

Cukup tambahkan kelas select-checkboxke selectelemen Anda dan sertakan CSS berikut:

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

Anda dapat menggunakan karakter unicode lama biasa (dengan enkode hex yang lolos ) seperti ini:

☐ Kotak Suara -\2610
☑ Kotak Suara Dengan Cek -\2611

Atau jika Anda ingin membumbuinya, Anda dapat menggunakan mesin terbang FontAwesome ini

.fa-square-o -\f096
.fa-check-square-o -\f046

Demo di jsFiddle & Stack Snippets

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Catatan : Namun, waspadalah terhadap masalah kompatibilitas IE

Question 5

Coba pilih banyak , terutama beberapa item . Tampaknya menjadi solusi yang lebih bersih dan terkelola, dengan banyak contoh. Anda juga dapat melihat sumbernya.

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

Question 6

Saya mulai dari jawaban @vitfo tetapi saya ingin memiliki masukan <option>di dalam <select>daripada kotak centang jadi saya mengumpulkan semua jawaban untuk membuat ini, ada kode saya, saya harap ini akan membantu seseorang.

$(".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>

Luaskan cuplikan

Question 7

Versi Vanilla JS alternatif dengan klik di luar untuk menyembunyikan kotak centang:

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)

Saya menggunakan addEventListener daripada onClick untuk memanfaatkan opsi fase menangkap / menggelegak bersama dengan stopPropagation (). Anda dapat membaca lebih lanjut tentang penangkapan / menggelegak di sini: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Kode lainnya cocok dengan jawaban asli vitfo (tetapi tidak perlu onclick () di html). Beberapa orang telah meminta fungsi ini tanpa jQuery.

Berikut contoh codepen https://codepen.io/davidysoards/pen/QXYYYa?editors=1010

Question 8

Anda dapat menggunakan pustaka ini di git untuk tujuan ini https://github.com/ehynds/jquery-ui-multiselect-widget

untuk memulai kotak pilih gunakan ini

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

dan ketika Anda memiliki data siap di json (dari ajax atau metode apa pun), pertama-tama parsing data & kemudian tetapkan array js ke sana

    var js_arr = $.parseJSON(/*data from ajax*/);
    $("#selectBoxId").val(js_arr);
    $("#selectBoxId").multiselect("refresh");

Question 9

Gunakan kode ini untuk daftar kotak centang pada menu opsi.

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

Luaskan cuplikan

Question 10

Anda mungkin memuat file multiselect.js sebelum daftar opsi diperbarui dengan panggilan AJAX sehingga saat eksekusi file multiselect.js ada daftar opsi kosong di sana untuk menerapkan fungsi multiselect. Jadi pertama perbarui daftar opsi dengan panggilan AJAX kemudian mulai panggilan multiselect Anda akan mendapatkan daftar tarik-turun dengan daftar opsi dinamis.

Semoga ini bisa membantu Anda.

Multipilih daftar dropdown dan file js & css terkait

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

Luaskan cuplikan

Question 11

Anda dapat mencoba Bootstrap-pilih . Ini juga memiliki pencarian langsung!

Question 12

Jika Anda ingin membuat beberapa dropdown pilih di halaman yang sama:

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

Menggunakan 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();
        }
 }

Question 13

Hanya tambahkan class create div dan tambahkan class form-control. saya menggunakan JSP, boostrap4. Abaikan 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>

Answer 1

94

Klien telah memberi saya desain yang memiliki menu Opsi Pilihan yang berisi kotak centang bersama dengan nama item sebagai item individual dalam daftar. Apakah ada kemungkinan untuk menambahkan kotak centang di dalam menu Pilih Opsi?

NB: Pengembang perlu menambahkan id sendiri untuk membuat menu efektif, saya hanya perlu kode HTML CSS jika memungkinkan.

javascript html css html-select Hero Tra
sumber

5

"Saya hanya perlu kode HTML CSS jika memungkinkan" ... ya, itu mungkin ... Anda hanya perlu mengkodekannya sendiri atau google it

fmodos

5

@Modos Mungkin? Tolong berikan kami demo, dan OP - lihat ini ... Ini tidak mungkin dengan CSS dan HTML saja

Tn. Alien

Silakan baca posting ini 1stwebdesigns.com/blog/development/…

kuldeep raj

@ Tuan Alien saya tidak mengerti ... Saya pikir dia meminta komponen yang "bisa" menjadi HTML CSS dan tidak "harus" menjadi hanya "HTML CSS" ... saya buruk: /

fmodos

Answer 2

5

"Saya hanya perlu kode HTML CSS jika memungkinkan" ... ya, itu mungkin ... Anda hanya perlu mengkodekannya sendiri atau google it

fmodos

Answer 3

5

@Modos Mungkin? Tolong berikan kami demo, dan OP - lihat ini ... Ini tidak mungkin dengan CSS dan HTML saja

Tn. Alien

Answer 4

Silakan baca posting ini 1stwebdesigns.com/blog/development/…

kuldeep raj

Answer 5

@ Tuan Alien saya tidak mengerti ... Saya pikir dia meminta komponen yang "bisa" menjadi HTML CSS dan tidak "harus" menjadi hanya "HTML CSS" ... saya buruk: /

fmodos

Answer 6

Anda tidak dapat menempatkan kotak centang di dalam elemen pilih tetapi Anda bisa mendapatkan fungsi yang sama dengan menggunakan HTML, CSS dan JavaScript. Berikut adalah solusi kerja yang mungkin. Berikut penjelasannya.

masukkan deskripsi gambar di sini

Kode:

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>

Luaskan cuplikan

Penjelasan:

Pertama kita membuat elemen pilih yang menampilkan teks "Pilih opsi", dan elemen kosong yang menutupi (tumpang tindih) elemen pilih ( <div class="overSelect">). Kami tidak ingin pengguna mengklik elemen pilih - ini akan menampilkan opsi kosong. Untuk tumpang tindih elemen dengan elemen lain kami menggunakan properti posisi CSS dengan nilai relatif | mutlak.

Untuk menambahkan fungsionalitas kita menetapkan fungsi JavaScript yang dipanggil saat pengguna mengklik div yang berisi elemen pilih kita ( <div class="selectBox" onclick="showCheckboxes()">).

Kami juga membuat div yang berisi kotak centang kami dan menatanya menggunakan CSS. Fungsi JavaScript yang disebutkan di atas hanya mengubah <div id="checkboxes">nilai properti tampilan CSS dari "tidak ada" menjadi "blok" dan sebaliknya.

Solusinya telah diuji di browser berikut: Internet Explorer 10, Firefox 34, Chrome 39. Browser harus mengaktifkan JavaScript.

Informasi lebih lanjut:

Posisi CSS

Cara melapisi satu div di atas div lainnya

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

Properti tampilan CSS

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

Answer 7

1

FYI: Solusi ini akan membutuhkan lebih banyak usaha jika lebih dari satu daftar pilih perlu dimodifikasi. Saya sarankan masuk untuk beberapa plugin yang dipelihara secara aktif.

Answer 8

bagaimana cara mendapatkan nilai kotak centang yang dipilih? Jawaban yang sangat bagus tetapi akan sangat membantu jika Anda memberikan plnkr atau semacamnya.

Pardeep Jain

Answer 9

7

juga untuk memilih kotak tidak hilang ketika pengguna memilih opsi apa pun

Pardeep Jain

Answer 10

1

Jawaban ini bagus dan berhasil untuk saya. Namun ada satu perbaikan yang saya buat. Alih-alih overselectdiv yang berpotensi menyebabkan beberapa masalah dalam antarmuka kompleks yang saya gunakan <option selected hidden>Select an option</option>. Ini mungkin bukan penggunaan terbaik hiddentetapi berhasil.

Syknapse

Answer 11

2

tapi bagaimana cara menyembunyikan dropdown, saat kita klik di luar?

saurabh kumar

Answer 12

Plugin terbaik sejauh ini adalah 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>

Inilah DEMO tersebut

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

Luaskan cuplikan

Answer 13

1

Anda tidak perlu menggunakan banyak pustaka ini untuk solusi Anda. Anda bisa menggunakan opsi HTML Multiple select biasa. Terima kasih!

Power Star

Answer 14

3

Saya tahu saya dapat menggunakan opsi HTML multiple select, tetapi saya merasa itu jelek dan tidak ramah pengguna.

pmrotule

Answer 15

4

Saya suka perilaku plugin ini, tetapi ingin menggunakannya tanpa bootstrap ... yang serupa?

singpolyma

Answer 16

plugin ini sangat bermasalah ... mereka memiliki 150 masalah terbuka dan pengelola mengatakan bahwa dia tidak punya waktu. jadi setelah beberapa masalah saya beralih ke jawaban dan vue yang diterima

Oleg Abrazhaev

Answer 17

1

@Erbureth Jalur skrip / lembar gaya eksternal sudah usang di demo (tautan mati). Saya memperbarui url untuk memperbaikinya.

pmrotule

Answer 18

Untuk pendekatan CSS Murni , Anda dapat menggunakan :checkedselektor yang digabungkan dengan ::beforeselektor untuk menyebariskan konten bersyarat.

Cukup tambahkan kelas select-checkboxke selectelemen Anda dan sertakan CSS berikut:

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

Anda dapat menggunakan karakter unicode lama biasa (dengan enkode hex yang lolos ) seperti ini:

☐ Kotak Suara -\2610
☑ Kotak Suara Dengan Cek -\2611

Atau jika Anda ingin membumbuinya, Anda dapat menggunakan mesin terbang FontAwesome ini

.fa-square-o -\f096
.fa-check-square-o -\f046

Demo di jsFiddle & Stack Snippets

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Catatan : Namun, waspadalah terhadap masalah kompatibilitas IE

Answer 19

1

Ini masalah ketika multipleatribut membuat <select>tampilan seperti kotak dan bukan dropdown ...

vsync

Answer 20

@vsync, dapatkah Anda menguraikan masalah apa yang Anda hadapi, bahkan mungkin membagi biola dan menyertakan tangkapan layar. Tujuannya di sini adalah untuk diterapkan ke <select multiple>elemen, jadi itu harus menjadi kasus penggunaan yang dimaksudkan. Pemilih CSS harus spesifik untuk menerapkan kelas itu sehingga Anda memutuskan untuk menggunakan elemen individu dengan menerapkan .select-checkboxkelas

KyleMit

Answer 21

1

Sangat merekomendasikan solusi elegan ini jika Anda mencari pendekatan CSS murni.

Anish Sana

Answer 22

@Solusih tetapi masalahnya adalah jika saya ingin memilih beberapa item maka saya harus menggunakan tombol Ctrl seperti elemen pilih sederhana.

Lalit Rajput

Answer 23

@LalitRajput, tentu, bahwa Desain Interaksi default untuk semua kontrol pilihan ganda di semua browser. Saya setuju bahwa ini agak miring atau tidak intuitif. Anda selalu dapat menemukan cara untuk mengesampingkan perilaku default itu jika Anda mau. Bagaimana menghindari kebutuhan untuk ctrl-klik di kotak pilih banyak menggunakan Javascript? - lihat biola yang diperbarui

KyleMit

Answer 24

Coba pilih banyak , terutama beberapa item . Tampaknya menjadi solusi yang lebih bersih dan terkelola, dengan banyak contoh. Anda juga dapat melihat sumbernya.

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

Answer 25

Meskipun tautan ini mungkin menjawab pertanyaan, lebih baik menyertakan bagian penting dari jawaban di sini dan menyediakan tautan untuk referensi. Jawaban link saja bisa menjadi tidak valid jika halaman tertaut berubah. - Dari Ulasan

Justin

Answer 26

Saya mulai dari jawaban @vitfo tetapi saya ingin memiliki masukan <option>di dalam <select>daripada kotak centang jadi saya mengumpulkan semua jawaban untuk membuat ini, ada kode saya, saya harap ini akan membantu seseorang.

$(".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>

Luaskan cuplikan

Answer 27

Versi Vanilla JS alternatif dengan klik di luar untuk menyembunyikan kotak centang:

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)

Saya menggunakan addEventListener daripada onClick untuk memanfaatkan opsi fase menangkap / menggelegak bersama dengan stopPropagation (). Anda dapat membaca lebih lanjut tentang penangkapan / menggelegak di sini: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Kode lainnya cocok dengan jawaban asli vitfo (tetapi tidak perlu onclick () di html). Beberapa orang telah meminta fungsi ini tanpa jQuery.

Berikut contoh codepen https://codepen.io/davidysoards/pen/QXYYYa?editors=1010

Answer 28

Anda dapat menggunakan pustaka ini di git untuk tujuan ini https://github.com/ehynds/jquery-ui-multiselect-widget

untuk memulai kotak pilih gunakan ini

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

dan ketika Anda memiliki data siap di json (dari ajax atau metode apa pun), pertama-tama parsing data & kemudian tetapkan array js ke sana

    var js_arr = $.parseJSON(/*data from ajax*/);
    $("#selectBoxId").val(js_arr);
    $("#selectBoxId").multiselect("refresh");

Answer 29

Gunakan kode ini untuk daftar kotak centang pada menu opsi.

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

Luaskan cuplikan

Answer 30

Untuk contoh yang lengkap tentang pendekatan dasar membangun dropdown-menudengan elemen kotak centang di setiap baris, berikut adalah jawaban untuk meletakkan kotak centang di dropdown Bootstrap

KyleMit

Answer 31

Anda mungkin memuat file multiselect.js sebelum daftar opsi diperbarui dengan panggilan AJAX sehingga saat eksekusi file multiselect.js ada daftar opsi kosong di sana untuk menerapkan fungsi multiselect. Jadi pertama perbarui daftar opsi dengan panggilan AJAX kemudian mulai panggilan multiselect Anda akan mendapatkan daftar tarik-turun dengan daftar opsi dinamis.

Semoga ini bisa membantu Anda.

Multipilih daftar dropdown dan file js & css terkait

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

Luaskan cuplikan

Answer 32

1

Anda dapat mencoba Bootstrap-pilih . Ini juga memiliki pencarian langsung!

saee
sumber

Answer 33

Jika Anda ingin membuat beberapa dropdown pilih di halaman yang sama:

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

Menggunakan 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();
        }
 }

Answer 34

Hanya tambahkan class create div dan tambahkan class form-control. saya menggunakan JSP, boostrap4. Abaikan 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>

Cara menggunakan Kotak Centang di dalam Opsi Pilihan

Jawaban:

Kode:

Penjelasan:

Informasi lebih lanjut:

Demo di jsFiddle & Stack Snippets