how to limit selection if first option is chosen in select2

how to limit selection if first option is chosen in select2 - javascript

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>

Related

How could to manage two same select2, hide and show selected item from another select2

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>

jQuery move select option to the second position

I have select :
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
...
<option value="37">Switzerland</option>
...
</select>
How can I move option with text Switzerland to the second position in the list ? Result will be :
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="37">Switzerland</option>
<option value="40">Afghanistan</option>
...
</select>

You can use jquery after() to place it after the first-child in the select - see demo below:
$('select[name=country_id] option:first-child').after($('select[name=country_id] option[value=37]'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="37">Switzerland</option>
</select>

You can get all of the <option> elements, and then filter them by the value attribute. Finally, once you have the correct element selected (in this case for Switzerland), you can use insertBefore() to move its location in the DOM.
Example:
var $opts = $('.selCommon').children();
$opts.filter('[value="37"]').insertBefore( $opts.eq(1) )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="40">United Kingdom</option>
<option value="40">USA</option>
<option value="37">Switzerland</option>
</select>

You can also try this:
$(document).ready(function(){
var options = $('.selCommon option' );
var SwitzerlandIndex=0;
var cnt=0;
$(options).each(function(){
if($(this).text() == "Switzerland"){
SwitzerlandIndex=cnt;
}
cnt++;
});
$(options[SwitzerlandIndex]).insertAfter($(options[0]));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="41">Test</option>
<option value="37">Switzerland</option>
<option value="38">Test 2</option>
</select>

You can sort on the value
$('.selCommon option').sort((a, b) => a.value - b.value).appendTo('.selCommon');
$('.selCommon').val("")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="57">Sweden</option>
<option value="37">Switzerland</option>
<option value="12">USA</option>
</select>

Disable 3th, 4th dropdown list if 1st or 2nr are selected

I have this issue: In my form there are 4 dropdownlist and when the 1st (category1) or 2nd (software1) dropdown list is selected, the 3th (category2) and 4th (software2) must be disabled.
For this issue I find this script at disable-second-dropdown-if-the-first-is-not-selected but I do not trust to modify this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<script type="text/javascript">
var setEnabled = function(e) {
var name = this.name.replace(/1/, '2'); //get name for second drop down
$('select[name=' + name + ']')
.prop('disabled', 0 === this.selectedIndex) // disable if selected option is first one
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
</script>
How to modify this?
Thanks

I think the main thing you want is to flip === for !==
However, to get this working on a matrix, where both top inputs trigger enabling/disabling of both bottom inputs, you'll need to test both on change of either.
var setEnabled = function(e) {
var selected = $('select[name=cat1]').prop('selectedIndex') > 0 || $('select[name=soft1]').prop('selectedIndex') > 0;
$('select[name=cat2], select[name=soft2]').prop('disabled', selected); // disable if selected option is first one
if (selected) {
$('select[name=cat2], select[name=soft2]').prop('selectedIndex', 0)
}
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>

Populate HTML select Tag with first input

Filling every inputs of a working hours form can be quite tedious.
Is there a way to populate every inputs from a form with the first entered value?
In the case of this Fiddle https://jsfiddle.net/az8ujh1e/1/, a first input on any of the opend date would populate the other ones (that could still be modified one by one)
and a first input on the closed dates would do the same on all the closing dates.
Code:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-6">Opend</div>
<div class="col-sm-6">Closed</div>
<form role="form" action="#" method="POST">
<div class="col-sm-6" id="timeopen1">
<select name="timeopen1" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed1">
<select name="timeclosed1" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeopen2">
<select name="timeopen2" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed2">
<select name="timeclosed2" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeopen3">
<select name="timeopen3" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed3">
<select name="timeclosed3" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeopen4">
<select name="timeopen4" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed4">
<select name="timeclosed4" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6"><br>
<button type="submit" class="btn btn-default" name="submit_time" >Submit</button>
</div>
</form>

I think the other answers are missing the point that he values should only be set automatically if the other values have not yet been set.
Add "timeopen" and "timeclosed" classes to your selectors like this:
<select name="timeopen1" class='selectpicker timeopen'>
Then the following script will change the other three values only if they are still set to "00:00".
$(function() {
$(".timeclosed, .timeopen").change(function() {
if ($(this).hasClass("timeopen")) {
autoSet(".timeopen", this);
} else {
autoSet(".timeclosed", this);
}
});
function autoSet(classSelector, t) {
if ($(classSelector + " option[value='00:00']:selected").length == 3) {
$(classSelector).val($(t).val());
}
}
});
This may cause a problem if three of them need to be set to "00:00", as it will then change the fourth one to "00:00" as well. So instead of checking the values, you may want to use global variables so that the autoSet only runs once for .timeopen and once for .timeclosed.
$(function() {
var autoSetTimeopen = true;
var autoSetTimeclosed = true;
$(".timeclosed, .timeopen").change(function() {
if ($(this).hasClass("timeopen") && autoSetTimeopen) {
autoSet(".timeopen", this);
autoSetTimeopen = false;
} else if ($(this).hasClass("timeclosed") && autoSetTimeclosed) {
autoSet(".timeclosed", this);
autoSetTimeclosed = false;
}
});
function autoSet(classSelector, t) {
if ($(classSelector + " option[value='00:00']:selected").length == 3) {
$(classSelector).val($(t).val());
}
}
});

If I correctly understood you want to display the value you selected in one field in all other fields from the same type. If so you just need to add a class "open" or "closed" to your select inputs and then proceed like this :
$('select').on('change', function() {
var value = $(this).val();
var className = 'open';
if( $(this).hasClass('closed') ) {
className = 'closed';
}
$('select.' + className).val(value);
});
Here is your Fiddle updated:
https://jsfiddle.net/az8ujh1e/2/

Here is a code which would do what you want, but it is not fully optimized right now. What I would do is, add ids to the select tags, so you can easily work with them with javascript or jquery.
$('#timeopen1 select').change(function(){
var opt = $(this).val()
for(i = 2; i<=4; i++){
$('#timeopen'+i.toString()+' select').val(opt);
}
});
$('#timeclosed1 select').change(function(){
var opt = $(this).val()
for(i = 2; i<=4; i++){
$('#timeclosed'+i.toString()+' select').val(opt);
}
});
EDIT:
Just as someone mentioned in another answer, add classes timeopen and timeclosed to your select elements, so we can easily work with them. Here is the updated code, to set all elements just the first time.
$('.selectpicker').one('change',function(event){
var opt = $(this).val()
if($(this).hasClass('timeopen'))
{
$('.timeopen').each(function(){
$(this).val(opt);
$(this).off('change');
});
}
else
{
$('.timeclosed').each(function(){
$(this).val(opt);
$(this).off('change');
});
}
});
https://jsfiddle.net/az8ujh1e/13/

Selecting multiple groups in the dropdown

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>

Develop Reference

JavaScript is the programming language of the Web.

how to limit selection if first option is chosen in select2 - javascript

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/

Related

How could to manage two same select2, hide and show selected item from another select2

jQuery move select option to the second position

Disable 3th, 4th dropdown list if 1st or 2nr are selected

Populate HTML select Tag with first input

Selecting multiple groups in the dropdown

Categories

Resources