web-dev-qa-db-ja.com

Select Option内でCheckboxを使用する方法

クライアントは、リスト内の個々の項目として項目名とともにチェックボックスを含む[オプションの選択]メニューを含むデザインを私に提供しました。 [オプションの選択]メニュー内にチェックボックスを追加することはできますか？

注意：開発者はメニューを有効にするために自分のIDを追加する必要があります。可能であれば、HTML CSSコードだけが必要です。

htmlcsshtml-select
78
Hero Tra

Select要素内にチェックボックスを配置することはできませんが、HTML、CSS、およびJavaScriptを使用して同じ機能を取得することができます。これが可能な解決策です。説明は次のとおりです。

enter image description here

コード：

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 an option"を表示するselect要素と、select要素を覆う（オーバーラップする）空の要素（<div class="overSelect">）を作成します。ユーザーがselect要素をクリックしないようにします。空のオプションが表示されます。その要素を他の要素と重ね合わせるために、CSSのpositionプロパティにrelative値を指定します。絶対の。

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

また、チェックボックスを含むdivを作成し、CSSを使用してスタイルを設定します。上記のJavaScript関数はCSSのdisplayプロパティの<div id="checkboxes">の値を "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

153
vitfo

これまでのところ最良のプラグインは 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>

これが DEMO です

50
pmrotule

純粋な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文字（ のエスケープされた16進エンコーディング を使うことができます）：

もしあなたが物事を盛り上げたいのなら、あなたはこれらの FontAwesome グリフを使うことができます。

Screenshot

jsFiddle とスタックスニペットのデモ

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>

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

14
KyleMit

複数選択 してみてください。たくさんの例を挙げれば、非常にクリーンで管理されたソリューションであるように見えます。

10
Azghanvi

オプションメニューのチェックボックスリストにこのコードを使用してください。

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

あなたはこの目的のために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");
1
Jaya Parwani

外部をクリックしてチェックボックスを非表示にする代替バニラ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以外で要求しています。

Codepenの例はこちら https://codepen.io/davidysoards/pen/QXYYYa?editors=101

1
davidysoards

私は@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>
1
pavelbere
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>
1
i hate this

AJAX呼び出しでオプションリストが更新される前にmultiselect.jsファイルをロードしている可能性があるため、multiselect.jsファイルの実行中に空のオプションリストが存在し、複数選択機能を適用できます。そのため、最初にAJAX callでオプションリストを更新してから、複数選択呼び出しを開始すると、動的オプションリストを含むドロップダウンリストが表示されます。

これが助けになることを願っています。

複数選択ドロップダウンリスト と 関連する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
Yaswini Modupalli