Jak korzystać z pola wyboru w opcji Wybierz opcję

98

Klient dał mi projekt, który ma menu Wybierz opcję zawierające pole wyboru wraz z nazwą pozycji jako poszczególne pozycje na liście. Czy mimo wszystko można dodać pole wyboru w menu Wybierz opcję?

Uwaga: programista musi dodać własny identyfikator, aby menu było skuteczne, potrzebuję tylko kodu HTML CSS, jeśli jest to możliwe.

javascript html css html-select Hero Tra
źródło
7
„Potrzebuję kodu HTML CSS tylko wtedy, gdy jest to możliwe” ... tak, jest możliwe ... wystarczy, że
zakodujesz
5
@fmodos Possible? Proszę, wyślij nam demo i OP - sprawdź to ... To nie jest możliwe tylko z CSS i HTML
Mr. Alien
Przeczytaj ten post 1stwebdesigns.com/blog/development/…
kuldeep raj
@ Mr. Alien Tęsknię za zrozumieniem ... Myślałem, że prosił o komponent, który „mógłby” być HTML CSS, a nie „musiał” być tylko „HTML CSS” ... mój błąd: /
fmodos
@ Mr. Alien, Link daje 403.
Linux4Life531

Odpowiedzi:

195

Nie możesz umieścić pola wyboru w elemencie select, ale możesz uzyskać tę samą funkcjonalność, używając HTML, CSS i JavaScript. Oto możliwe działające rozwiązanie. Wyjaśnienie następuje.

wprowadź opis obrazu tutaj

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>
Rozwiń fragment

Wyjaśnienie:

Najpierw tworzymy element select, który wyświetla tekst „Wybierz opcję” i pusty element, który zakrywa (zachodzi) na wybrany element ( <div class="overSelect">). Nie chcemy, aby użytkownik klikał wybrany element - pokazywałoby to puste opcje. Aby nałożyć element na inny element, używamy właściwości CSS position z wartością względną | absolutny.

Aby dodać tę funkcjonalność, określamy funkcję JavaScript, która jest wywoływana, gdy użytkownik kliknie element div zawierający nasz element select (<div class="selectBox" onclick="showCheckboxes()"> ).

Tworzymy również div, który zawiera nasze pola wyboru i stylizujemy go za pomocą CSS. Wspomniana powyżej funkcja JavaScript po prostu się zmienia<div id="checkboxes"> wartość właściwości wyświetlania CSS z „brak” na „blok” i odwrotnie.

Rozwiązanie zostało przetestowane w przeglądarkach: Internet Explorer 10, Firefox 34, Chrome 39. W przeglądarce musi być włączona obsługa JavaScript.

Więcej informacji:

Pozycjonowanie CSS

Jak nałożyć jeden element div na inny element div

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

Właściwość wyświetlania CSS

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

vitfo
źródło
1
Do Twojej wiadomości: To rozwiązanie będzie wymagało więcej wysiłku, jeśli konieczna jest modyfikacja więcej niż jednej listy wyboru. Proponuję wejść na jakąś aktywnie utrzymywaną wtyczkę.
jak uzyskać wartość zaznaczonych checkboxów? Bardzo dobra odpowiedź, ale byłoby bardzo pomocne, gdybyś podał plnkr lub coś podobnego.
Pardeep Jain
7
również pole wyboru nie znika, gdy użytkownik wybierze dowolną opcję
Pardeep Jain
1
Ta odpowiedź jest świetna i zadziałała dla mnie. Jest jednak jedno ulepszenie, które w nim zrobiłem. Zamiast elementu overselectdiv, który mógłby potencjalnie spowodować problemy w złożonym interfejsie, którego użyłem <option selected hidden>Select an option</option>. Może nie jest to najlepsze zastosowanie, hiddenale działa.
Syknapse
3
ale jak ukryć menu, gdy klikniemy na zewnątrz?
saurabh kumar
59

Jak dotąd najlepszą wtyczką jest 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>

Oto 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>
Rozwiń fragment

pmrotule
źródło
1
Nie musisz używać tak dużej ilości bibliotek do swojego rozwiązania. Możesz po prostu użyć zwykłej opcji wielokrotnego wyboru HTML. Dzięki!
Power Star
3
Wiem, że mogę użyć opcji wielokrotnego wyboru HTML, ale uznałem ją za brzydką i nieprzyjazną dla użytkownika.
pmrotule
4
Podoba mi się zachowanie tej wtyczki, ale chcę jej używać bez ładowania początkowego ... coś podobnego?
singpolyma
ta wtyczka jest tak błędna ... mają 150 otwartych problemów, a opiekun powiedział, że nie ma czasu. więc po kilku problemach przełączyłem się na zaakceptowaną odpowiedź i vue
Oleg Abrazhaev
1
@Erbureth Zewnętrzne ścieżki skryptów / arkuszy stylów były nieaktualne w wersji demonstracyjnej (martwe linki). Zaktualizowałem adresy URL, aby to naprawić.
pmrotule
18

W przypadku podejścia opartego na czystym CSS , możesz użyć :checkedselektora w połączeniu z ::beforeselektorem do wbudowanej zawartości warunkowej.

Po prostu dodaj klasę select-checkboxdo swojego selectelementu i dołącz następujący kod CSS:

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

Możesz użyć zwykłych starych znaków Unicode (z kodowaniem szesnastkowym ze zmianą znaczenia ), takich jak te:

A jeśli chcesz urozmaicić, możesz użyć tych glifów FontAwesome

Zrzut ekranu

Demo w jsFiddle & Stack Snippets

Pokaż fragment kodu

Uwaga : należy jednak uważać na problemy ze zgodnością z IE

KyleMit
źródło
1
Jest to problem, gdy multipleatrybut sprawia, że <select>wygląda jak pudełko zamiast listy rozwijanej ...
vsync
@vsync, czy możesz wyjaśnić, jaki masz problem, może nawet rozwidlić skrzypce i dołączyć zrzut ekranu. Celem jest tutaj zastosowanie do <select multiple>elementu, tak powinno być w zamierzonym przypadku użycia. Selektory CSS powinny być specyficzne dla zastosowania tej klasy, więc decydujesz się użyć na poszczególnych elementach, stosując .select-checkboxklasę
KyleMit
1
Gorąco polecam to eleganckie rozwiązanie, jeśli szukasz czystego podejścia CSS.
Anish Sana
@KyleMit Niezłe rozwiązanie !!! ale problem polega na tym, że jeśli chcę zaznaczyć wiele elementów, muszę użyć przycisku Ctrl jako prostego elementu zaznaczania.
Lalit Rajput
@LalitRajput, upewnij się, że domyślny projekt interakcji dla wszystkich kontrolek wielokrotnego wyboru we wszystkich przeglądarkach. Zgadzam się, że jest to trochę dziwne lub nieintuicyjne. Zawsze możesz znaleźć sposób na zastąpienie tego domyślnego zachowania, jeśli chcesz, aby zapoznać się z Jak uniknąć konieczności klikania klawiszem Ctrl w polu wyboru wielokrotnego za pomocą JavaScript? - zobacz zaktualizowane skrzypce
KyleMit,
14

Wypróbuj opcję wielokrotnego wyboru , zwłaszcza wielu elementów . Wygląda na bardzo czyste i zarządzane rozwiązanie, z mnóstwem przykładów. Możesz również wyświetlić źródło.

<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
źródło
Chociaż ten link może odpowiedzieć na pytanie, lepiej jest zawrzeć tutaj zasadnicze części odpowiedzi i podać link do odniesienia. Odpowiedzi zawierające tylko łącze mogą stać się nieprawidłowe, jeśli połączona strona ulegnie zmianie. - Z recenzji
Justin
8

Zacząłem od odpowiedzi @vitfo, ale chcę mieć w <option>środku <select>zamiast pól wyboru, więc zebrałem wszystkie odpowiedzi, aby to zrobić, jest mój kod, mam nadzieję, że komuś pomoże.

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

pavelbere
źródło
6

Alternatywna wersja Vanilla JS z kliknięciem na zewnątrz, aby ukryć pola wyboru:

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)

Używam addEventListener zamiast onClick, aby skorzystać z opcji przechwytywania / propagacji wraz z funkcją stopPropagation (). Możesz przeczytać więcej o przechwytywaniu / propagowaniu tutaj: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Reszta kodu odpowiada oryginalnej odpowiedzi vitfo (ale nie ma potrzeby stosowania onclick () w html). Kilka osób zażądało tej funkcji bez jQuery.

Oto przykład codepen https://codepen.io/davidysoards/pen/QXYYYa?editors=1010

davidysoards
źródło
2

W tym celu możesz użyć tej biblioteki na git https://github.com/ehynds/jquery-ui-multiselect-widget

użyj tego do zainicjowania pola wyboru

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

a kiedy masz już gotowe dane w json (z ajax lub dowolnej metody), najpierw przeanalizuj dane, a następnie przypisz do nich tablicę js

    var js_arr = $.parseJSON(/*data from ajax*/);
    $("#selectBoxId").val(js_arr);
    $("#selectBoxId").multiselect("refresh");
Jaya Parwani
źródło
2

Użyj tego kodu, aby wyświetlić listę pól wyboru w menu opcji.

.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>
Rozwiń fragment

Rupesh Wankhede
źródło
Aby uzyskać w pełni rozwinięty przykład tego podstawowego podejścia do budowania dropdown-menuz elementami pola wyboru w każdym wierszu, oto odpowiedź na umieszczanie
pól
1

Być może ładujesz plik multiselect.js przed aktualizacją listy opcji wywołaniem AJAX, więc podczas wykonywania pliku multiselect.js jest pusta lista opcji do zastosowania funkcji multiselect. Więc najpierw zaktualizuj listę opcji przez wywołanie AJAX, a następnie zainicjuj połączenie wielokrotnego wyboru, a pojawi się lista rozwijana z dynamiczną listą opcji.

Mam nadzieję, że to ci pomoże.

Lista rozwijana wielokrotnego wyboru oraz powiązane pliki js i 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>
Rozwiń fragment

Yaswini Modupalli
źródło
1

Możesz spróbować wyboru Bootstrap . Ma również wyszukiwanie na żywo!

saee
źródło
0

Jeśli chcesz utworzyć wiele list rozwijanych wyboru na tej samej stronie:

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

Korzystanie z 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
źródło
-2

Dodaj tylko klasę, utwórz div i dodaj kontrolkę formularza klasy. Używam JSP, boostrap4. Ignoruj ​​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
źródło