ক্লায়েন্টটি আমাকে একটি নকশা দিয়েছে যা তালিকায় পৃথক আইটেম হিসাবে আইটেমের নাম সহ একটি চেকবক্সযুক্ত একটি নির্বাচন বিকল্প মেনু রয়েছে। একটি নির্বাচন বিকল্প মেনুতে যে কোনও উপায়ে চেকবক্স যুক্ত করা সম্ভব?
এনবি: মেনু কার্যকর করার জন্য বিকাশকারীকে তার নিজস্ব আইডি যুক্ত করতে হবে, এটি সম্ভব হলে আমার কেবল এইচটিএমএল সিএসএস কোড প্রয়োজন।
উত্তর:
আপনি নির্বাচিত উপাদানগুলির মধ্যে চেকবক্স রাখতে পারবেন না তবে আপনি এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে একই কার্যকারিতাটি পেতে পারেন। এখানে একটি সম্ভাব্য কার্যক্ষম সমাধান। ব্যাখ্যা অনুসরণ।
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">) কে আবরণ করে (ওভারল্যাপ করে) দেখায় । আমরা চাই না যে ব্যবহারকারী নির্বাচিত উপাদানটিতে ক্লিক করুন - এটি একটি খালি বিকল্প প্রদর্শন করবে। অন্যান্য উপাদানটির সাথে উপাদানটি ওভারল্যাপ করতে আমরা সিএসএস অবস্থানের সম্পত্তিটি মানের সাথে সম্পর্কিত use পরম।
কার্যকারিতা যুক্ত করতে আমরা একটি জাভাস্ক্রিপ্ট ফাংশন নির্দিষ্ট করি যা বলা হয় যখন ব্যবহারকারীটি আমাদের নির্বাচিত উপাদান ( <div class="selectBox" onclick="showCheckboxes()">) থাকে এমন ডিভিতে ক্লিক করে ।
আমরা ডিভিও তৈরি করি যা আমাদের চেকবাক্সগুলি ধারণ করে এবং CSS ব্যবহার করে এটি স্টাইল করে। উপরে উল্লিখিত জাভাস্ক্রিপ্ট ফাংশনটি কেবলমাত্র <div id="checkboxes">"কিছুই নয়" থেকে "ব্লক" এবং এর বিপরীতে সিএসএস প্রদর্শন সম্পত্তিটির মান পরিবর্তন করে ।
সমাধানটি নিম্নলিখিত ব্রাউজারগুলিতে পরীক্ষা করা হয়েছিল: ইন্টারনেট এক্সপ্লোরার 10, ফায়ারফক্স 34, ক্রোম 39. ব্রাউজারটির জাভাস্ক্রিপ্ট সক্ষম হওয়া দরকার।
সিএসএস পজিশনিং
কীভাবে একটি ডিভকে অন্য ডিভের উপরে ওভারলে করা যায়
http://www.w3schools.com/css/css_positioning.asp
সিএসএস প্রদর্শন সম্পত্তি
overselectআমি ব্যবহার করা একটি জটিল ইন্টারফেসে সম্ভাব্য কিছু সমস্যা তৈরি করতে পারে <option selected hidden>Select an option</option>। এটি এর সেরা ব্যবহার নাও হতে পারে hiddenতবে এটি কাজ করে।
এখন পর্যন্ত সেরা প্লাগইন হ'ল বুটস্ট্র্যাপ মাল্টিসিলেট
<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>একটি জন্য বিশুদ্ধ সিএসএস পদ্ধতি, আপনি ব্যবহার করতে পারেন :checkedনির্বাচক সঙ্গে মিলিত ::beforeশর্তসাপেক্ষ বিষয়বস্তু ইনলাইন করার নির্বাচক।
কেবলমাত্র select-checkboxআপনার selectউপাদানটিতে ক্লাস যুক্ত করুন এবং নিম্নলিখিত সিএসএস অন্তর্ভুক্ত করুন:
.select-checkbox option::before {
content: "\2610";
width: 1.3em;
text-align: center;
display: inline-block;
}
.select-checkbox option:checked::before {
content: "\2611";
}
আপনি এর মতো সরল পুরানো ইউনিকোড অক্ষর (একটি পালিয়ে যাওয়া হেক্স এনকোডিং সহ ) ব্যবহার করতে পারেন :
\2610\2611অথবা আপনি যদি মসলা জিনিষ আপ চান, আপনি ব্যবহার করতে পারেন FontAwesome গ্লিফ
.ফা-স্কোয়ার-ও -\f096
.ফা-চেক-বর্গ-ও -\f046
দ্রষ্টব্য : তবে IE সামঞ্জস্যতার বিষয়গুলি থেকে সাবধান থাকুন
multipleএট্রিবিউটটি <select>ড্রপডাউনটির পরিবর্তে বাক্সের মতো করে তোলে ... এটি একটি সমস্যা ...
<select multiple>উপাদানটিতে প্রয়োগ করা , যাতে এটি ব্যবহারের ক্ষেত্রে হওয়া উচিত। CSS সিলেক্টর যে বর্গ প্রয়োগের নির্দিষ্ট হতে হবে যাতে আপনি প্রয়োগের দ্বারা পৃথক উপাদান ব্যবহারের করার সিদ্ধান্ত নেন .select-checkboxবর্গ
একাধিক-নির্বাচন , বিশেষ করে একাধিক-আইটেম চেষ্টা করুন । অনেকগুলি উদাহরণ সহ অনেক পরিষ্কার এবং পরিচালিত সমাধান বলে মনে হচ্ছে। আপনি উত্সটি দেখতেও পারেন।
<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>
আমি @ ভিটফো উত্তর থেকে শুরু করেছি তবে আমি চেকবক্স ইনপুটগুলির পরিবর্তে <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>চেকবাক্সগুলি লুকানোর জন্য বাইরে ক্লিক করে বিকল্প ভ্যানিলা জেএস সংস্করণ:
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)
স্টপপ্রোগেশন () এর পাশাপাশি ক্যাপচার / বুদ্বুদ ফেজ বিকল্পগুলির সুবিধা নিতে আমি অনক্লিকের পরিবর্তে অ্যাডএভেন্টলিস্টনার ব্যবহার করছি। আপনি এখানে ক্যাপচার / বুদবুদ সম্পর্কে আরও পড়তে পারেন: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
বাকি কোড ভিটফোর মূল উত্তরটির সাথে মেলে (তবে এইচটিএমএলে অনক্লিকের প্রয়োজন নেই)। দু'জন লোক এই কার্যকারিতা সন্ন্যাদ করেছে jQuery requested
এখানে কোডপেন উদাহরণ https://codepen.io/davidysoards/pen/QXYYYa?editors=1010
আপনি এই উদ্দেশ্যে এই লাইব্রেরিটি গিটের জন্য ব্যবহার করতে পারেন https://github.com/ehynds/jquery-ui-multiselect-widget
সিলেক্টবক্সটি আরম্ভ করার জন্য এটি ব্যবহার করুন
$("#selectBoxId").multiselect().multiselectfilter();
এবং যখন আপনার কাছে জসনে ডেটা প্রস্তুত রয়েছে (এজ্যাক্স বা কোনও পদ্ধতি থেকে), প্রথমে ডেটা পার্স করুন এবং তারপরে এটিতে জেএস অ্যারে নির্ধারণ করুন
var js_arr = $.parseJSON(/*data from ajax*/);
$("#selectBoxId").val(js_arr);
$("#selectBoxId").multiselect("refresh");
বিকল্প মেনুতে চেকবক্স তালিকার জন্য এই কোডটি ব্যবহার করুন।
.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প্রতিটি সারিতে চেকবক্স উপাদানগুলির সাথে একটি কাঠামো তৈরির এই প্রাথমিক পদ্ধতির উপর সম্পূর্ণরূপে উদ্ভাসিত উদাহরণের জন্য , বুটস্ট্র্যাপ ড্রপডাউনটিতে চেকবক্সগুলি রাখার
আপনি এজেএক্স কলের সাথে বিকল্প তালিকা আপডেট হওয়ার আগে মাল্টিসিলেট.জেএস ফাইলটি লোড করা হতে পারে সুতরাং মাল্টিসিলেক্ট.জেএস ফাইল কার্যকর করার সময় খালি বিকল্প তালিকা রয়েছে মাল্টিসিলেক্ট ফাংশনালিটি প্রয়োগ করার জন্য। সুতরাং প্রথমে এজেএক্স কল দ্বারা বিকল্প তালিকাটি আপডেট করুন এবং তারপরে মলিটাইলেক্ট কলটি শুরু করুন আপনি গতিশীল বিকল্প তালিকার সাথে ড্রপডাউন তালিকা পাবেন।
আশা করি ইহা তোমাকে সাহায্য করবে.
মাল্টিলেসলেট ড্রপডাউন তালিকা এবং সম্পর্কিত জেএস ও সিএসএস ফাইল
// 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>আপনি বুটস্ট্র্যাপ নির্বাচন করতে পারেন । এটি একটি লাইভ অনুসন্ধান আছে!
আপনি যদি একই পৃষ্ঠায় একাধিক নির্বাচন ড্রপডাউন তৈরি করতে চান:
.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>
<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>
জ্যাকুরি ব্যবহার:
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();
}
}
কেবল শ্রেণি তৈরি ডিভ যোগ করুন এবং শ্রেণি ফর্ম-নিয়ন্ত্রণ যুক্ত করুন। আইএম জেএসপি, বুস্ট্রেপ 4 ব্যবহার করুন। সি: অগ্রণী উপেক্ষা করুন।
<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>