I have one dropdown which consists of list of groups and respective items for the groups.I want to select a group so that automatically the groups items should also select based on the selection of groups in the dropdown
Here is my html code :
<select id="example-multiple-optgroups" class="multiselect-group">
<optgroup label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select
And JavaScript:
$('.multiselect-group').before('<input type="checkbox" />');
$(document).on('click', '.multiselect-group', function(event) {
var checkAll = true;
var $opts = $(this).parent().nextUntil(':has(.multiselect-group)');
var $inactive = $opts.filter(':not(.active)');
var $toggleMe = $inactive;
if ($inactive.length == 0) {
$toggleMe = $opts;
checkAll = false;
}
$toggleMe.find('input').click();
$(this).parent().find('input').attr('checked', checkAll);
event.preventDefault();
});
I am trying these code ,but I am not getting the proper output,please let me know procedure to get this done.
You can achieve this by using plugin and below is the code. To download js and css file please Click Here
Image is attached
<head>
<link href="css/multiple-select.css" rel="stylesheet"/>
</head>
<body>
<select multiple="multiple">
<optgroup label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2" >Option 1.2</option>
<option value="1-3" >Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
<script src="js/jquery.min.js"></script>
<script src="js/multiple-select.js"></script>
<script>
$("select").multipleSelect({
multiple: true,
multipleWidth: 100,
width: '100%'
});
</script>
</body>
Related
I have multiple select options have different classes and names and I am using selectize library to allow the user to search. I want to get the selected values on click of a button. Right now, I have tried the following code
$(window).bind("load", function()
{
var selectize_search_1 = $('.selectize_search_1').selectize(
{
sortField: 'text'
});
});
function fetch_cars()
{
var cars_value = $('.selectize_search_1')[0].selectize.items;
alert (cars_value);
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
<select class="selectize_search_1" name="cars[]" required>
<option value="">Select Car</option>
<option value="C1">Car 1</option>
<option value="C2">Car 2</option>
<option value="C3">Car 3</option>
</select>
<br />
<select class="selectize_search_1" name="cars[]" required>
<option value="">Select Car</option>
<option value="C1">Car 1</option>
<option value="C2">Car 2</option>
<option value="C3">Car 3</option>
</select>
<hr />
<button type="button" onclick="fetch_cars();">Fetch Cars</button>
So, lets suppose i select car 1 and car 2 from the dropdowns, but using the above code, it only return me the selected value in the first dropdown but not both selected values.
This should do it:
$(function(){
var selectize_search_1 = $('.selectize_search_1').selectize({sortField: 'text'});
});
function fetch_cars(){
var cars_value = $('select.selectize_search_1').get().map(el=>el.value).join(",");
console.log(cars_value);
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
<select class="selectize_search_1" name="cars[]" required>
<option value="">Select Car</option>
<option value="C1">Car 1</option>
<option value="C2">Car 2</option>
<option value="C3">Car 3</option>
</select>
<br />
<select class="selectize_search_1" name="cars[]" required>
<option value="">Select Car</option>
<option value="C1">Car 1</option>
<option value="C2">Car 2</option>
<option value="C3">Car 3</option>
</select>
<hr />
<button type="button" onclick="fetch_cars();">Fetch Cars</button>
If you want the values of all select boxes you will need to .map() over them.
The jQueryObject.get() will extract the element selection from the jQuery object, so the following .map() is a plain ("Vanilla") Array.prototype.map() again.
My solution. Create unique <select> class.
I added a working version. Has two unique <select> classes now, with the corresponding jQuery.
$(window).bind("load", function() {
var selectize_search_1 = $('.selectize_search_1').selectize({
sortField: 'text'
});
//create new selectize...
//create new selectize...
var selectize_search_2 = $('.selectize_search_2').selectize({
sortField: 'text'
});
});
function fetch_cars() {
var cars_value = $('.selectize_search_1')[0].selectize.items;
//make another var...
//make another var...
var cars_value2 = $('.selectize_search_2')[0].selectize.items;
//retrieve new selectize...
//retrieve new selectize...
alert("select1: "+cars_value + " select2: " + cars_value2);
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
<select class="selectize_search_1" name="cars[]" required>
<option value="">Select Car</option>
<option value="C1">Car 1</option>
<option value="C2">Car 2</option>
<option value="C3">Car 3</option>
</select>
<br />
<!-- add new class -->
<!-- add new class -->
<select class="selectize_search_2" name="cars[]" required>
<!-- add new class -->
<!-- add new class -->
<option value="">Select Car</option>
<option value="C1">Car 1</option>
<option value="C2">Car 2</option>
<option value="C3">Car 3</option>
</select>
<hr />
<button type="button" onclick="fetch_cars();">Fetch Cars</button>
According this question I able to add selected item to another select.
Consider we have two select2, with same options.
When I select item from box1, same item should removed from box2 and user couldn't select it.
I provide it on jsfiddle.net.
Now I want to unselected it, the box2 should have that item again.
<select multiple id="Box1" name="Box1" style='width:325px;float:left;border:1px solid #80C7E2;'>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="D">D</option>
</select>
<select multiple id="Box2" name="Box2" style='width:325px;float:left;border:1px solid #80C7E2;'>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="D">D</option>
</select>
$("#Box1").select2();
$("#Box2").select2();
$("#Box1").on("change", function() {
$.each($('#Box1').select2('data'), function(i, item) {
$('#Box2 option[value="'+item.id+'"]').remove();
});
});
Try this, it's may help :
$("#Box1").select2();
$("#Box2").select2();
$("#Box1").on("change", function(e)
{
$("#Box2").html("");
$('#Box1 option').each(function()
{
if($("#Box1").val())
{
if($("#Box1").val().some(e=>{return e == $(this).val()}))
{
$('#Box2 option[value="'+$(this).val()+'"]').remove();
}
else if(!$("#Box2 option").toArray().some(e=>{return e.value == $(this).val()}))
{
$("#Box2").append($('<option>', {value: $(this).val(), text: $(this).text()}));
}
}
else
{
$("#Box2").html($("#Box1").html());
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/>
<select multiple id="Box1" name="Box1" style='width:325px;float:left;border:1px solid #80C7E2;'>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="D">D</option>
</select>
<select multiple id="Box2" name="Box2" style='width:325px;float:left;border:1px solid #80C7E2;'>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="D">D</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
I have the following selection box (multiple selection) in HTML.
<select class="selectpicker form-control" id="dhsSelect" multiple data-selected-text-format="count"
title="Selected All..." name="dhsSelect">
<optgroup data-max-options="1" id="top">
<option value="T5">Top 5</option>
<option value="T10">Top 10</option>
<option value="T20">Top 20</option>
</optgroup>
<optgroup id="filter">
<option value="1">< 10</option>
<option value="2">10 - 20</option>
<option value="3">≥ 20</option>
</optgroup>
</select>
And the following JS file
$("#dhsSelect").change(function() {
// if any item in the top optgroup (id='top') is being selected, do something
// if any item in the second optgroup (id='bottom') is bring selected, do something
});
I am trying to work on the if condition. Any help would be appreciated.
You mean something like this?
Change map to forEach and return to your function and remove the console log - I’m just giving you the tools, the lack of details in your question results in lack of details in my answer
$("#dhsSelect").on("change", function() {
console.log(
$("option", this).map(function() {
if (this.selected) return this.value + " " + this.closest("optgroup").id
}).get()
)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectpicker form-control" id="dhsSelect" multiple data-selected-text-format="count" title="Selected All..." name="dhsSelect">
<optgroup data-max-options="1" id="top">
<option value="T5">Top 5</option>
<option value="T10">Top 10</option>
<option value="T20">Top 20</option>
</optgroup>
<optgroup id="filter">
<option value="1">< 10</option>
<option value="2">10 - 20</option>
<option value="3">≥ 20</option>
</optgroup>
</select>
Here is an easy way:
$(function(){ // load
var dhsSelect = $('#dhsSelect');
dhsSelect.on('change', function(){
console.clear(); // remove upon deployment
dhsSelect.find(':selected').each(function(){
var p = $(this).parent();
// just showing we got the correct parent
console.log(p.attr('id'))
});
});
}); // end load
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectpicker form-control" id="dhsSelect" multiple data-selected-text-format="count"
title="Selected All..." name="dhsSelect">
<optgroup data-max-options="1" id="top">
<option value="T5">Top 5</option>
<option value="T10">Top 10</option>
<option value="T20">Top 20</option>
</optgroup>
<optgroup id="filter">
<option value="1">< 10</option>
<option value="2">10 - 20</option>
<option value="3">≥ 20</option>
</optgroup>
</select>
I am using Select2 and would like to allow users to select multiple options BUT NOT if the first option is selected.
The first option is "select later", and if this is chosen, no other items should be selectable. But if other options are selected, it should be possible to select multiple.
I can easily achieve selecting multipe, but how to limit further selection if the first option is selected?
$('#example').select2();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<select id="example" multiple="multiple" style="width: 300px">
<option value="-1">Select later</option>
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
tracking the change and update the values accordingly.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<select id="example" multiple="multiple" style="width: 300px">
<option value="-1">Select later</option>
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
<script>
var $example = $('#example');
$example.select2();
$example.on("change", function() {
var vals = $(this).val();
if (vals.length > 1 && vals.includes("-1")) {
$(this).val("-1");
$(this).trigger('change');
}
})
</script>
You can use select2:opening event and check if the first item selected or not. If first item selected use preventDefault.
Working code here:
jsfiddle.net/xpvt214o/475246/
Something like this will do. If 'Select later' selected - rest of the items will be cleared.
$(function() {
$('#example').select2();
$('#example').on('select2:select', function(){
// if($(this).val()==null){$(this).trigger('change');}
if( $(this).val().indexOf('-1')!=-1 && $(this).val().length>1){
$(this).val('-1').trigger('change');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<select id="example" multiple="multiple" style="width: 300px">
<option value="-1">Select later</option>
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
I have multiple select topion.
And I need to show the selected values.with the data of '2,4,5;
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2">test Value2</option>
<option value="3">test Value3</option>
<option value="4">test Value4</option>
<option value="5">test Value5</option>
<option value="6">test Value6</option>
</select>
Can I use this code to get what I need.
<script type="javascript">
$(document).ready(function() {
var val_to_select = '2,4,5';
$( '#testID' ).val( val_to_select );
)};
</script>
I need output to be like this
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2" selected>test Value2</option>
<option value="3">test Value3</option>
<option value="4" selected>test Value4</option>
<option value="5" selected>test Value5</option>
<option value="6">test Value6</option>
</select>
you can pass the value in an array like this
$("#testID").val([1,2,3]);
JsFiddle
You can use this:
var data="1,2,4";
//Make an array
var dataarray=data.split(",");
// Set the value
$("#testID").val(dataarray);
// Then refresh
$("#testID").multiselect("refresh");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2">test Value2</option>
<option value="3">test Value3</option>
<option value="4">test Value4</option>
<option value="5">test Value5</option>
<option value="6">test Value6</option>
</select>
Also your code is not javascript but jquery.