Seçim Seçeneği içinde Onay Kutusu nasıl kullanılır

98

Müşteri bana, listedeki tek tek öğeler olarak öğe adıyla birlikte bir onay kutusu içeren bir Seçenek Seç menüsüne sahip bir tasarım verdi. Bir Seçenek Belirleme menüsüne bir onay kutusu eklemek mümkün mü?

Not: Geliştiricinin menüyü etkili hale getirmek için kendi kimliğini eklemesi gerekiyor, sadece mümkünse HTML CSS koduna ihtiyacım var.

javascript  html  css  html-select 
— Kahraman Tra
kaynak
7
"HTML CSS koduna sadece eğer mümkünse ihtiyacım var" ... evet, mümkün ... sadece kendiniz
— kodlamanız
5
@fmodos Mümkün mü? Bize bir demo atmak, ve OP Lütfen - check bu out ... Bu CSS ve HTML yalnızca mümkün değil
— Sayın Alien
Lütfen bu yazıyı
— kuldeep raj
@ Bay Alien özledim anladım ... HTML CSS olabilecek ve sadece "HTML CSS" olması "gerekmeyen" bir bileşen istediğini düşündüm ... benim hatam: /
— fmodos
@ Bay Alien, bağlantı 403 veriyor.
— Linux4Life531

Yanıtlar:

196

Seçili öğenin içine onay kutusu yerleştiremezsiniz ancak HTML, CSS ve JavaScript kullanarak aynı işlevselliği elde edebilirsiniz. İşte olası bir çalışma çözümü. Açıklama aşağıdadır.

görüntü açıklamasını buraya girin

Kod:

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>
Snippet'i genişlet

Açıklama:

İlk olarak, "Bir seçenek belirleyin" metnini gösteren bir seçme öğesi ve select öğesini ( <div class="overSelect">) örten (üst üste binen) boş bir öğe oluşturuyoruz . Kullanıcının seçili öğeye tıklamasını istemiyoruz - boş bir seçenek gösterecektir. Öğeyi diğer öğeyle örtüştürmek için, göreli | mutlak.

İşlevselliği eklemek için, kullanıcı select elemanımızı ( <div class="selectBox" onclick="showCheckboxes()">) içeren div öğesini tıkladığında çağrılan bir JavaScript işlevi belirtiriz .

Ayrıca, onay kutularımızı içeren ve CSS kullanarak stilini belirleyen bir div oluşturuyoruz. Yukarıda bahsedilen JavaScript işlevi <div id="checkboxes">, CSS görüntüleme özelliğinin değerini "yok" dan "engelle" ye ve tersi yönde değiştirir.

Çözüm aşağıdaki tarayıcılarda test edilmiştir: Internet Explorer 10, Firefox 34, Chrome 39. Tarayıcının JavaScript'in etkin olması gerekir.

Daha fazla bilgi:

CSS konumlandırma

Bir div başka bir div üzerine nasıl yerleştirilir

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

CSS görüntüleme özelliği

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

— vitfo
kaynak
1
Bilginize: Birden fazla seçim listesinin değiştirilmesi gerekiyorsa, bu çözüm daha fazla çaba gerektirecektir. Aktif olarak korunan bazı eklentilere girmenizi öneririm.
seçilen onay kutularının değeri nasıl alınır? Çok güzel cevap ama plnkr veya benzeri bir şey sağlarsanız çok yardımcı olur.
— Pardeep Jain
7
ayrıca kullanıcı herhangi bir seçenek
— belirlediğinde
1
Bu cevap harika ve benim için çalıştı. Bununla birlikte, üzerinde yaptığım bir gelişme var. overselectKullandığım karmaşık bir arayüzde potansiyel olarak bazı sorunlara neden olabilecek div yerine <option selected hidden>Select an option</option>. En iyi kullanım olmayabilir hiddenama işe yarıyor.
— Syknapse
3
ama dışarıya tıkladığımızda açılır menüyü nasıl gizleyebiliriz?
— saurabh kumar
59

Şimdiye kadarki en iyi eklenti 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>

İşte 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>
Snippet'i genişlet

— PMrotule
kaynak
1
Çözümünüz için bu kadar çok kitaplık kullanmanıza gerek yok. Normal HTML Çoklu seçim seçeneğini kullanabilirsiniz. Teşekkürler!
— Güç Yıldız
3
HTML çoklu seçim seçeneğini kullanabileceğimi biliyorum, ancak bunu çirkin buldum ve kullanıcı dostu bulmadım.
— pmrotule
4
Bu eklentinin davranışını seviyorum ama onu önyükleme olmadan kullanmak istiyorum ... benzer bir şey?
— singpolyma
bu eklenti o kadar hatalı ki ... 150 açık sorunu var ve geliştirici, zamanının olmadığını söyledi. bu yüzden bazı sorunlardan sonra kabul edilen cevaba
— geçtim
1
@Erbureth Demoda harici komut dosyası / stil sayfası yolları güncelliğini yitirdi (ölü bağlantılar). Düzeltmek için url'leri güncelledim.
— pmrotule
18

Bir İçin Saf CSS yaklaşımı, kullanabilirsiniz :checkedbirlikte seçici ::beforeşartlı içeriği satır içi seçicinin.

Sadece sınıf eklemek select-checkboxiçin için selecteleman ve aşağıdaki CSS şunlardır:

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

Düz, eski unicode karakterleri (çıkış karakterli onaltılık kodlama ile ) aşağıdaki gibi kullanabilirsiniz:

Ya da bir şeyleri renklendirmek istiyorsanız, bu FontAwesome gliflerini kullanabilirsiniz.

Ekran görüntüsü

JsFiddle ve Yığın Parçacıklarında Demo

Kod parçacığını göster

Not : Ancak IE uyumluluk sorunlarına dikkat edin

— KyleMit
kaynak
1
multipleÖznitelik <select>bir açılır
— menü
@vsync, hangi sorunu yaşadığınızı detaylandırabilir misiniz, hatta keman çalıp bir ekran görüntüsü bile ekleyebilir misiniz? Buradaki amaç, bir <select multiple>öğeye uygulamaktır , böylece amaçlanan kullanım durumu bu olmalıdır. Eğer uygulayarak bağımsız öğelerin kullanımına karar böylece CSS seçicilerinin o sınıfı uygulamak için spesifik olmalıdır .select-checkboxsınıfı
— KyleMit
1
Saf bir CSS yaklaşımı arıyorsanız bu zarif çözümü şiddetle tavsiye edin.
— Anish Sana
@KyleMit Güzel çözüm !!! ancak sorun şu ki, eğer birden fazla öğe seçmek istiyorsam, basit seçim öğesi gibi Ctrl düğmesini kullanmam gerekiyor.
— Lalit Rajput
@LalitRajput, elbette, tüm tarayıcılarda tüm çoklu seçim kontrolleri için varsayılan Etkileşim Tasarımı. Bunun biraz riskli veya sezgisel olmadığına katılıyorum. Her zaman başına isterseniz o varsayılan davranışı geçersiz yollarını bulabilirsiniz Javascript kullanarak bir çoklu seçim kutusuna ctrl tıklama ihtiyacını nasıl önlenir? - güncellenmiş
— kemana
14

Birden çok seçimi , özellikle birden çok öğeyi deneyin . Tonlarca örnekle çok temiz ve yönetilen bir çözüm gibi görünüyor. Ayrıca kaynağı da görüntüleyebilirsiniz.

<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
kaynak
Bu bağlantı soruyu cevaplayabilirken, cevabın temel kısımlarını buraya eklemek ve referans için bağlantıyı sağlamak daha iyidir. Bağlantılı sayfa değişirse yalnızca bağlantı yanıtları geçersiz hale gelebilir. - Yorumdan
— Justin
8

@Vitfo cevabından başladım ama onay kutusu girişleri yerine <option>içeride olmasını istiyorum <select>bu yüzden bunu yapmak için tüm cevapları bir araya getirdim, kodum var, umarım birine yardımcı olur.

$(".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>
Snippet'i genişlet

— Pavelbere
kaynak
6

Onay kutularını gizlemek için dışarıda tıklama özelliğine sahip alternatif Vanilla JS sürü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)

StopPropagation () ile birlikte yakalama / köpürme aşaması seçeneklerinden yararlanmak için onClick yerine addEventListener kullanıyorum. Yakalama / köpürme hakkında daha fazla bilgiyi buradan okuyabilirsiniz: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Kodun geri kalanı vitfo'nun orijinal cevabıyla eşleşir (ancak html'de onclick () öğesine gerek yoktur). Birkaç kişi jQuery'den bu işlevselliği talep etti.

İşte kodepen örneği https://codepen.io/davidysoards/pen/QXYYYa?editors=1010

— Davidysoards
kaynak
2

Bu kitaplığı bu amaç için git üzerinde kullanabilirsiniz https://github.com/ehynds/jquery-ui-multiselect-widget

seçim kutusunu başlatmak için bunu kullanın

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

ve json'da (ajax veya herhangi bir yöntemden) veriler hazır olduğunda, önce verileri ayrıştırın ve ardından js dizisini ona atayın

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

Seçenek menüsünde onay kutusu listesi için bu kodu kullanı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>
Snippet'i genişlet

— Rupesh Wankhede
kaynak
dropdown-menuHer satırda onay kutusu öğeleri bulunan bu temel yaklaşımla ilgili tamamen ayrıntılı bir örnek için , işte bir Bootstrap açılır listesine onay kutuları koymanın
— KyleMit
1

AJAX çağrısı ile güncellenen seçenek listesi öncesinde multiselect.js dosyasını yüklüyor olabilirsiniz, bu nedenle multiselect.js dosyasının yürütülmesi sırasında çoklu seçim işlevini uygulamak için boş seçenek listesi vardır. Bu nedenle, önce seçenek listesini AJAX çağrısıyla güncelleyin, ardından çoklu seçim çağrısını başlatın, dinamik seçenek listesini içeren açılır listeyi alacaksınız.

Umarım bu size yardımcı olur.

Çoklu seçim açılır listesi ve ilgili js & css dosyaları

// 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>
Snippet'i genişlet

— Yaswini Modupalli
kaynak
0

Aynı sayfada birden çok açılır menü oluşturmak istiyorsanız:

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

Jquery kullanarak:

 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();
        }
 }
— Kül gibi
kaynak
-2

Yalnızca sınıf ekleyin, div oluşturun ve sınıf form denetimi ekleyin. iam JSP, boostrap4 kullanıyorum. C: foreach'ı göz ardı edin.

<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
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.