選択オプション内でチェックボックスを使用する方法

94

クライアントは、リスト内の個別のアイテムとしてアイテム名とともにチェックボックスを含む[オプションの選択]メニューを持つデザインを私にくれました。とにかく、オプションの選択メニュー内にチェックボックスを追加することは可能ですか？

注意：メニューを有効にするには、開発者が独自のIDを追加する必要があります。可能な場合は、HTML CSSコードのみが必要です。

javascript  html  css  html-select 
— ヒーロートラ
ソース
5
「とにかく可能であれば、HTML CSSコードだけが必要です」...はい、可能です...自分でコーディングするか、Googleでコーディングする必要があります
— fmodos
5
@fmodos可能ですか？私たちにデモとOPを投げてください- これをチェックしてください... CSSとHTMLだけでは不可能です
— Mr. Alien
この記事をお読みください1stwebdesigns.com/blog/development/...を
— kuldeepラジ
@ Mr.Alien理解できなかった...私は彼が「HTML CSS」だけである必要がなく「HTML CSS」である必要がなかったコンポーネントを求めていると思った...私の悪い：/
— fmodos

回答:

188

select要素内にチェックボックスを配置することはできませんが、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>
スニペットを展開

説明：

最初に、「オプションを選択してください」というテキストを表示するselect要素と、select要素を覆う（オーバーラップする）空の要素（<div class="overSelect">）を作成します。ユーザーがselect要素をクリックするのは望ましくありません-空のオプションが表示されます。要素を他の要素とオーバーラップするには、CSSの位置プロパティを使用して、相対値を指定します。絶対の。

機能を追加するには、ユーザーがselect要素（<div class="selectBox" onclick="showCheckboxes()">）を含むdivをクリックしたときに呼び出されるJavaScript関数を指定します。

また、チェックボックスを含むdivを作成し、CSSを使用してスタイルを設定します。上記のJavaScript関数<div id="checkboxes">は、CSS表示プロパティの値を「なし」から「ブロック」に、またはその逆に変更するだけです。

ソリューションは次のブラウザーでテストされました：Internet Explorer 10、Firefox 34、Chrome39。ブラウザーではJavaScriptを有効にする必要があります。

詳しくは：

CSSの配置

1つのdivを別のdivの上にオーバーレイする方法

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

CSS表示プロパティ

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

— vitfo
ソース
1
参考：複数の選択リストを変更する必要がある場合、このソリューションはより多くの労力を必要とします。積極的にメンテナンスされているプラ​​グインを使用することをお勧めします。
選択したチェックボックスの値を取得するにはどうすればよいですか？非常に良い答えですが、plnkrなどを提供すると非常に役立ちます。
— Pardeep Jain、2016
7
また、ユーザーがオプションを選択しても選択ボックスが消えない
— Pardeep Jain
1
この答えは素晴らしく、私にとってはうまくいきました。しかし、私がそれに加えた改善が1つあります。overselect私が使用した複雑なインターフェースでいくつかの問題を引き起こす可能性のあるdivの代わりに<option selected hidden>Select an option</option>。それは最善の使い方ではないかもしれませんが、hidden動作します。
— Syknapse
2
しかし、外側をクリックすると、ドロップダウンを非表示にする方法は？
— saurabh kumar
57

これまでのところ最高のプラグインは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>
スニペットを展開

— pmrotule
ソース
1
これらのライブラリをソリューションに使用する必要はありません。通常のHTML複数選択オプションを使用できます。ありがとう！
— パワースター、
3
HTMLの複数選択オプションを使用できることはわかっていますが、ユーザーフレンドリーではないことに気づきました。
— pmrotule 2015
4
このプラグインの動作は好きですが、ブートストラップなしで使用したいのですが...似たようなことはありますか？
— singpolyma 2016
このプラグインは非常にバグが多い...彼らは150の未解決の問題を抱えており、メンテナーは彼には時間がないと言った。だからいくつかの問題の後、私は受け入れられた答えとvueに切り替えました
— Oleg Abrazhaev
1
@Erbureth外部スクリプト/スタイルシートパスは、デモ（デッドリンク）で古くなりました。私はそれを修正するためにURLを更新しました。
— pmrotule 2018年
18

以下のために純粋な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";
}

次のように、プレーンな古いユニコード文字（エスケープされた16進エンコーディング）を使用できます。

または、スパイスをかけたい場合は、これらのFontAwesomeグリフを使用できます

スクリーンショット

jsFiddleとStack Snippetsのデモ

コードスニペットを表示

注：ただし、IEの互換性の問題に注意してください

— カイルミット
ソース
1
multiple属性が<select>ドロップダウンではなくボックスのように見えると問題になります...
— vsync
@vsync、あなたが抱えている問題について詳しく説明できますか？フィドルをフォークしてスクリーンショットを含めることもできます。ここでの目標は、<select multiple>要素に適用することです。そのため、それは意図されたユースケースである必要があります。あなたは適用することによって、個々の要素に使用することに決めたので、CSSセレクタは、そのクラスを適用するに特異的であるべきである.select-checkboxクラスを
— KyleMit
1
純粋なCSSアプローチを探している場合は、このエレガントなソリューションを強くお勧めします。
— アニッシュサナ
@KyleMitニースソリューション!!! しかし問題は、複数のアイテムを選択する場合、単純な選択要素のようにCtrlボタンを使用する必要があることです。
— Lalit Rajput
@LalitRajput、確かに、すべてのブラウザーのすべての複数選択コントロールのデフォルトのインタラクションデザイン。私はそれが一種の不安定で直感的でないことに同意します。JavaScriptを使用して複数選択ボックスでCtrlキーを押しながらクリックする必要を回避する方法に従って、必要に応じて、常にデフォルトの動作をオーバーライドする方法を見つけることができますか？-この更新されたフィドルを
— 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>
— アズガンヴィ
ソース
このリンクで質問に答えることができますが、回答の重要な部分をここに含め、参照用のリンクを提供することをお勧めします。リンクされたページが変更されると、リンクのみの回答が無効になる可能性があります。- レビューから
— Justin Lessard
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>
スニペットを展開

— Pavelbere
ソース
6

チェックボックスを非表示にするために外側をクリックする代替のバニラ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)

キャプチャ/バブリングフェーズオプションとstopPropagation（）を利用するために、onClickではなくaddEventListenerを使用しています。キャプチャ/バブルの詳細については、https：//developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListenerをご覧ください。

コードの残りの部分はvitfoの元の回答と一致します（ただし、htmlのonclick（）は不要です）。数人がjQueryではなくこの機能を要求しました。

これがコードペンの例ですhttps://codepen.io/davidysoards/pen/QXYYYa?editors=1010

— davidysoards
ソース
2

この目的のためにgitでこのライブラリを使用できます https://github.com/ehynds/jquery-ui-multiselect-widget

selectboxを開始するには、これを使用します

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

（ajaxまたは任意のメソッドからの）jsonでデータの準備ができたら、最初にデータを解析してから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各行にチェックボックス要素を使用してを作成するこの基本的なアプローチの完全に具体化された例については、ブートストラップドロップダウンにチェックボックスを配置する
— KyleMit
1

オプションリストがAJAX呼び出しで更新される前にmultiselect.jsファイルをロードしている可能性があります。そのため、multiselect.jsファイルの実行中に、空のオプションリストがあり、multiselect functionlaityを適用します。したがって、まず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とクラスform-controlのみを追加します。iamは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>
— フアンシルプマザ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.