Як використовувати прапорець усередині пункту Вибір параметра

94

Клієнт дав мені дизайн, який має меню Select Option, що містить прапорець разом із назвою елемента як окремі елементи у списку. Чи можна якось додати прапорець до меню Вибір опції?

Примітка: Розробник повинен додати свій власний ідентифікатор, щоб зробити меню ефективним, мені потрібен лише HTML CSS-код, якщо це можливо.

javascript  html  css  html-select 
— Герой Тра
джерело
5
"Мені потрібен лише HTML CSS-код, якщо це можливо в будь-якому випадку" ... так, це можливо ... вам просто потрібно буде його
— кодувати
5
@fmodos Можливо? Будь ласка, киньте нам демонстраційну версію, і OP - перевірте це ... Це неможливо лише з CSS та HTML
— Mr. Alien
Будь ласка, прочитайте цю публікацію 1stwebdesigns.com/blog/development/…
— raj
@ Mr.Alien Я сумую за розумінням ... Я думав, що він просить компонент, який "міг" бути HTML CSS, а не "повинен бути" лише "HTML CSS" ... моє погано: /
— fmodos

Відповіді:

188

Ви не можете розмістити прапорець всередині елемента вибору, але ви можете отримати ту ж функціональність, використовуючи HTML, CSS та JavaScript. Ось можливе робоче рішення. Пояснення далі.

введіть тут опис зображення

Код:

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}
.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" id="one" />First checkbox</label>
      <label for="two">
        <input type="checkbox" id="two" />Second checkbox</label>
      <label for="three">
        <input type="checkbox" id="three" />Third checkbox</label>
    </div>
  </div>
</form>
Розгорніть фрагмент

Пояснення:

Спочатку ми створюємо елемент виділення, який відображає текст "Виберіть варіант", і порожній елемент, який охоплює (перекриває) елемент виділення ( <div class="overSelect">). Ми не хочемо, щоб користувач натискав на виділений елемент - він відображав би порожні параметри. Для перекриття елемента з іншим елементом ми використовуємо властивість CSS position зі значенням відносно | абсолютний.

Щоб додати функціональність, ми вказуємо функцію JavaScript, яка викликається, коли користувач натискає div, що містить наш елемент select ( <div class="selectBox" onclick="showCheckboxes()">).

Ми також створюємо div, який містить наші прапорці, і стилізуємо його за допомогою CSS. Вищезгадана функція JavaScript просто змінює <div id="checkboxes">значення властивості відображення CSS з "none" на "block" і навпаки.

Рішення було протестовано в таких браузерах: Internet Explorer 10, Firefox 34, Chrome 39. У браузері повинен бути увімкнений JavaScript.

Більше інформації:

CSS-позиціонування

Як накласти один div на інший div

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

Властивість відображення CSS

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

— vitfo
джерело
1
FYI: Це рішення потребуватиме більше зусиль, якщо потрібно буде змінити декілька списків вибору. Я пропоную зайнятися деяким активно підтримуваним плагіном.
як отримати значення вибраних прапорців? Дуже хороша відповідь, але було б дуже корисно, якщо ви надасте plnkr або щось подібне.
— Пардіп Джейн
7
також поле для вибору не зникає, коли користувач вибирає будь-які параметри
— Pardeep Jain
1
Ця відповідь чудова, і вона у мене спрацювала. Однак є одне вдосконалення, яке я зробив у цьому. Замість overselectdiv, який потенційно може спричинити деякі проблеми у складному інтерфейсі, який я використовував <option selected hidden>Select an option</option>. Це може бути не найкращим використанням, hiddenале воно працює.
— Сикнапсе
2
але як приховати випадаюче меню, коли ми натискаємо назовні?
— saurabh kumar
58

На сьогодні найкращий плагін - 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>

Ось ДЕМО

$(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>
Розгорніть фрагмент

— пмротуля
джерело
1
Вам не потрібно використовувати цю велику частину бібліотек для свого рішення. Ви можете просто використовувати звичайний параметр HTML Multiple select. Дякую!
— Power Star
3
Я знаю, що можу скористатися опцією множинного вибору HTML, але мені здалося, що це негарно і не зручно для користувача.
— pmrotule
4
Мені подобається поведінка цього плагіна, але ви хочете використовувати його без bootstrap ... щось подібне?
— singpolyma 02
цей плагін настільки глючний ... у них 150 відкритих питань, і супровідник сказав, що у нього немає часу. тож після деяких питань я перейшов до прийнятої відповіді та відповіді
— Олег Абражаєв
1
@Erbureth Зовнішні шляхи сценаріїв / таблиць стилів були застарілими в демонстраційній програмі (мертві посилання). Я оновив URL-адреси, щоб це виправити.
— pmrotule
18

Для підходу Pure CSS ви можете використовувати :checkedселектор у поєднанні з ::beforeселектором, щоб вставити умовний вміст.

Просто додайте клас select-checkboxдо свого selectелемента та додайте наступний CSS:

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

Ви можете використовувати звичайні старі символи Unicode (із екранованим шістнадцятковим кодуванням ), наприклад:

Або якщо ви хочете оживити речі, ви можете використовувати ці гліфи FontAwesome

Знімок екрана

Демонстрація в jsFiddle & Stack Snippets

Показати фрагмент коду

Примітка . Остерігайтеся проблем сумісності з IE

— КайлМіт
джерело
1
Проблема, коли multipleатрибут <select>виглядає як вікно замість випадаючого списку ...
— vsync
@vsync, ти можеш детальніше пояснити, яка у тебе проблема, можливо, навіть розщепити скрипку та включити скріншот. Мета полягає в тому, щоб застосувати до <select multiple>елемента, так що це має бути призначений випадок використання. Селектори CSS повинні бути специфічними для застосування цього класу, тому ви вирішили використовувати окремі елементи, застосовуючи .select-checkboxклас
— KyleMit
1
Настійно рекомендую це елегантне рішення, якщо ви шукаєте підхід CSS.
— Аніш Сана,
@KyleMit Гарне рішення !!! але проблема полягає в тому, що якщо я хочу вибрати кілька елементів, то мені доведеться використовувати кнопку Ctrl як простий елемент вибору.
— Лалит Раджпут
@LalitRajput, впевнений, що Дизайн взаємодії за замовчуванням для всіх декількох елементів керування вибору у всіх браузерах. Я погоджуюсь, що це якось хитко або неінтуїтивно. Ви завжди можете знайти способи замінити цю поведінку за замовчуванням, якщо хочете. Як уникнути необхідності натискання клавіші Ctrl у полі вибору за допомогою Javascript? - дивіться цю оновлену скрипку
— KyleMit
14

Спробуйте кілька варіантів , особливо кілька елементів . Виглядає набагато чистішим та керованим рішенням із безліччю прикладів. Ви також можете переглянути джерело.

<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>
— Азганві
джерело
Хоча це посилання може відповісти на питання, краще включити сюди основні частини відповіді та надати посилання для довідки. Відповіді лише на посилання можуть стати недійсними, якщо пов’язана сторінка зміниться. - З огляду
— Джастін Лессард
8

Я почав з відповіді @vitfo, але я хочу мати <option>всередині <select>замість вхідних позначок, тому я зібрав усі відповіді, щоб зробити це, є мій код, я сподіваюся, це допоможе комусь.

$(".multiple_select").mousedown(function(e) {
    if (e.target.tagName == "OPTION") 
    {
      return; //don't close dropdown if i select option
    }
    $(this).toggleClass('multiple_select_active'); //close dropdown if click inside <select> box
});
$(".multiple_select").on('blur', function(e) {
    $(this).removeClass('multiple_select_active'); //close dropdown if click outside <select>
});
	
$('.multiple_select option').mousedown(function(e) { //no ctrl to select multiple
    e.preventDefault(); 
    $(this).prop('selected', $(this).prop('selected') ? false : true); //set selected options on click
    $(this).parent().change(); //trigger change event
});

	
	$("#myFilter").on('change', function() {
      var selected = $("#myFilter").val().toString(); //here I get all options and convert to string
      var document_style = document.documentElement.style;
      if(selected !== "")
        document_style.setProperty('--text', "'Selected: "+selected+"'");
      else
        document_style.setProperty('--text', "'Select values'");
	});
:root
{
	--text: "Select values";
}
.multiple_select
{
	height: 18px;
	width: 90%;
	overflow: hidden;
	-webkit-appearance: menulist;
	position: relative;
}
.multiple_select::before
{
	content: var(--text);
	display: block;
  margin-left: 5px;
  margin-bottom: 2px;
}
.multiple_select_active
{
	overflow: visible !important;
}
.multiple_select option
{
	display: none;
    height: 18px;
	background-color: white;
}
.multiple_select_active option
{
	display: block;
}

.multiple_select option::before {
  content: "\2610";
}
.multiple_select option:checked::before {
  content: "\2611";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myFilter" class="multiple_select" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>
Розгорніть фрагмент

— павельбер
джерело
6

Чергуйте версію Vanilla JS, натиснувши назовні, щоб сховати прапорці:

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)

Я використовую addEventListener замість onClick, щоб скористатися перевагами фази захоплення / бульбашки разом із stopPropagation (). Ви можете прочитати більше про захоплення / бульбашку тут: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Решта коду відповідає оригінальній відповіді vitfo (але немає необхідності в onclick () у html). Кілька людей просили цю функцію без jQuery.

Ось приклад codepen https://codepen.io/davidysoards/pen/QXYYYa?editors=1010

— davidysoards
джерело
2

Для цього ви можете використовувати цю бібліотеку на git https://github.com/ehynds/jquery-ui-multiselect-widget

для ініціювання поля вибору використовуйте це

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

і коли у вас є дані, готові в json (з ajax або будь-якого методу), спочатку проаналізуйте дані, а потім призначте їм масив js

    var js_arr = $.parseJSON(/*data from ajax*/);
    $("#selectBoxId").val(js_arr);
    $("#selectBoxId").multiselect("refresh");
— Джая Парвані
джерело
2

Використовуйте цей код для списку прапорців у меню опцій.

.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>
Розгорніть фрагмент

— Рупеш Ванкхеде
джерело
Щоб отримати детальний приклад щодо цього базового підходу до створення dropdown-menuелементів з прапорцями в кожному рядку, ось відповідь на встановлення прапорців у спадному меню Bootstrap
— KyleMit
1

Можливо, ви завантажуєте файл multiselect.js до того, як список опцій буде оновлений за допомогою виклику AJAX, тому під час виконання файлу multiselect.js існує порожній список опцій, щоб застосувати функцію багатовибірковості. Тож спочатку оновіть список опцій викликом AJAX, а потім ініціюйте багатовибірковий виклик, і ви отримаєте випадаючий список із динамічним списком опцій.

Сподіваюся, це допоможе вам.

Багатовибірний випадаючий список та пов’язані файли js & css

// This function should be called while loading page
var loadParentTaskList = function(){
    $.ajax({
        url: yoururl,
        method: 'POST',
        success: function(data){
            // To add options list coming from AJAX call multiselect
            for (var field in data) {
                $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');
            }
   
            // To initiate the multiselect call 
            $("#parent_task").multiselect({
                includeSelectAllOption: true
            })
        }
    });
}
// Multiselect drop down list with id parent_task
<select id="parent_task" multiple="multiple">
</select>
Розгорніть фрагмент

— Ясвіні Модупаллі
джерело
0

Якщо ви хочете створити кілька випадаючих списків на одній сторінці:

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

 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();
        }
 }
— Ашиш
джерело
-2

Додайте лише клас create div та додайте клас-контроль форми. я використовую JSP, boostrap4. Ігнорувати c: foreach.

<div class="multi-select form-control" style="height:107.292px;">
        <div class="checkbox" id="checkbox-expedientes">
            <c:forEach var="item" items="${postulantes}">
                <label class="form-check-label">
                    <input id="options" class="postulantes" type="checkbox" value="1">Option 1</label>
            </c:forEach>
        </div>
    </div>
— Хуан Сілупу Маза
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.