it-swarm.dev

كيفية استخدام مربع الاختيار داخل حدد الخيار

لقد أعطاني العميل تصميمًا يحتوي على قائمة تحديد خيار تحتوي على مربع اختيار مع اسم العنصر كعناصر فردية في القائمة. هل من الممكن على أي حال إضافة مربع اختيار داخل قائمة تحديد الخيار؟

ملاحظة: يحتاج المطور إلى إضافة معرفه الخاص لجعل القائمة فعالة ، أحتاج فقط إلى كود HTML CSS إذا كان ذلك ممكنًا.

78
Hero Tra

لا يمكنك وضع مربع اختيار داخل عنصر تحديد ولكن يمكنك الحصول على الوظيفة نفسها باستخدام 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>

تفسير:

في البداية ، نقوم بإنشاء عنصر تحديد يعرض النص "تحديد خيار" ، وعنصر فارغ يغطي (يتداخل) عنصر التحديد (<div class="overSelect">). لا نريد أن ينقر المستخدم على عنصر التحديد - سيُظهر خيارات فارغة. لتداخل العنصر مع عنصر آخر ، نستخدم خاصية موضع CSS مع القيمة النسبية | مطلق.

لإضافة الوظيفة ، نحدد وظيفة JavaScript تسمى عندما ينقر المستخدم على div الذي يحتوي على عنصر التحديد الخاص بنا (<div class="selectBox" onclick="showCheckboxes()">).

نقوم أيضًا بإنشاء div الذي يحتوي على مربعات الاختيار الخاصة بنا ونصممها باستخدام CSS. تتغير وظيفة JavaScript المذكورة أعلاه فقط قيمة <div id="checkboxes"> لخاصية عرض CSS من "بلا" إلى "كتلة" والعكس.

تم اختبار الحل في المتصفحات التالية: 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

49
pmrotule

بالنسبة إلى 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";
}

يمكنك استخدام أحرف يونيكود قديمة عادية (مع تشفير سداسي عشرية متهرب) ) مثل هذه:

أو إذا كنت ترغب في زيادة حجم الأشياء ، فيمكنك استخدام الحروف الرسومية هذه { FontAwesome

Screenshot

تجريبي في (jsFiddle & Stack Snackets

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

جرب حدد متعددة . يبدو أن الكثير من الحلول النظيفة والمدارة ، مع الكثير من الأمثلة.

11
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

يمكنك استخدام هذه المكتبة على بوابة لهذا الغرض https://github.com/ehynds/jquery-ui-multiselect-widget

لبدء boxbox استخدم هذا

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

وعندما يكون لديك بيانات جاهزة في json (من ajax أو أي طريقة) ، أولاً قم بتحليل البيانات ثم قم بتعيين صفيف js لها

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

ربما تقوم بتحميل ملف multiselect.js قبل تحديث قائمة الخيارات بـ AJAX استدعاء حتى أثناء تنفيذ ملف multiselect.js هناك قائمة خيارات فارغة موجودة لتطبيق وظيفة multiselect. لذا قم أولاً بتحديث قائمة الخيارات عن طريق AJAX المكالمة ثم بدء المكالمة المتعددة التي ستحصل عليها من القائمة المنسدلة مع قائمة الخيارات الديناميكية.

نأمل أن يكون هذا سوف تساعدك على الخروج.

القائمة المنسدلة Multiselect و ملفات 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

لقد بدأت من إجابة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>
0
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>
0
i hate this