Collapse / expand optgroup using select2 - javascript

I'm trying to use the Select2 jquery plugin to make the optgroups in my select drop down menu collapsible/expandable.
I found what looks to be a good and straightforward solution (https://github.com/select2/select2/issues/730) but it's not working for me and I think it's because it's from an older version of select2.
I've figured out how to update the css from
.select2-result-sub > li.select2-result {
display: none;
}
to
#select-container .select2-results__options--nested > li.select2-results__option {
display: none;
}
(where i've also put my select object in a container per How to override .select2-results .select2-highlighted color)
But I'm at a loss for how to update the required javascript:
$('.select2-results').on('click', 'li', function(){
$(this).find('li').show();
});
It seems to me like I would just need to replace select2-results with select2-results__options or select2-results__option, but I've tried a number of things, with and without using the container and I just can't get it to work. I don't have much experience in javascript/jquery so I don't really understand what I'm doing wrong with trying to select the optgroup element.
Also, here's my html:
<div id="select-container">
<select id="select-test" multiple="multiple" style="width:300px">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Group 2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</optgroup>
</select>
</div>
Any help is appreciated, thanks!!

Here's a simple demo.
$("#select-test").select2();
$("body").on('click', '.select2-results__group', function() {
$(this).siblings().toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<div id="select-container">
<select id="select-test" multiple="multiple" style="width:300px">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Group 2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</optgroup>
</select>
</div>
Edit:
We can start the optgroup as collapsed by using select2:open event. I add an object to record the collapsed state of each optgroup.
Set opacity to 0 and set it back to 1 after determining the collapsed state of each optgroup.
Note that select2:open triggered before the .select2-results__group created, so I use setTimeout to wait for a few miliseconds.
$("#select-test").select2();
let optgroupState = {};
$("body").on('click', '.select2-container--open .select2-results__group', function() {
$(this).siblings().toggle();
let id = $(this).closest('.select2-results__options').attr('id');
let index = $('.select2-results__group').index(this);
optgroupState[id][index] = !optgroupState[id][index];
})
$('#select-test').on('select2:open', function() {
$('.select2-dropdown--below').css('opacity', 0);
setTimeout(() => {
let groups = $('.select2-container--open .select2-results__group');
let id = $('.select2-results__options').attr('id');
if (!optgroupState[id]) {
optgroupState[id] = {};
}
$.each(groups, (index, v) => {
optgroupState[id][index] = optgroupState[id][index] || false;
optgroupState[id][index] ? $(v).siblings().show() : $(v).siblings().hide();
})
$('.select2-dropdown--below').css('opacity', 1);
}, 0);
})
<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.5/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<div id="select-container">
<select id="select-test" multiple="multiple" style="width:300px">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Group 2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</optgroup>
</select>
</div>

Related

Add third list on dependent dropdown list JS

I'm trying to create a dynamic dependent drop down lists. This code below work fine with 2 dependency and I’m trying to add a third dependency. Have you got any idea ?
For exemple :
Status 1 = offer 1, offer 2, offer 3 , offer 4
Offer 1 = Option 1
Thanks for your help
UPDATE 11.15.09
Finally find a solution
$("#street").val([]);
$('#street option').hide();
$("#city").on("change", function() {
$('#street option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#street").val([]);
})
$("#number").val([]);
$('#number option').hide();
$("#street").on("change", function() {
$('#number option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#number").val([]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
City:
<select id="city" name="city">
<option value="0">Select City</option>
<option value="1">Manchester</option>
<option value="2">Leicester</option>
<option value="3">Londra</option>
</select>
Street:
<select id="street" name="street">
<option value="1.A">Street A</option>
<option value="1.B">Street B</option>
<option value="1.C">Street C</option>
<option value="2.D">Street D</option>
<option value="2.E">Street E</option>
<option value="2.F">Street F</option>
<option value="3.G">Street G</option>
<option value="3.H">Street H</option>
</select>
Number:
<select id="number" name="number">
<option value="1.A">1</option>
<option value="1.B">2</option>
<option value="1.C">3</option>
<option value="2.D">4</option>
<option value="2.E">5</option>
</select>
I fixed the problem with javascript. (no need to use jQuery)
Please try to use updated code below.
HTML:
<div>
<select name="select1" id="select1">
<option value="1" data-sync="1">Status 1</option>
<option value="2" data-sync="2">Status 2</option>
</select>
</div>
<div>
<select name="select2" id="select2">
<option value="1">offer 1</option>
<option value="1">offer 2</option>
<option value="1">offer 3</option>
<option value="1">offer 4</option>
<option value="1">offer 5</option>
<option value="2">offer 6</option>
<option value="2">offer 7</option>
<option value="2">offer 8</option>
<option value="2">offer 9<option>
</select>
</div>
<div>
<select name="select3" id="select3">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="1">option 3</option>
<option value="2">option 4</option>
</select>
</div>
Javascript:
document.getElementById("select1").onchange=function() {
document.getElementById("select2").value=this.options[this.selectedIndex].getAttribute("data-sync");
document.getElementById("select3").value=this.options[this.selectedIndex].getAttribute("data-sync");
}
document.getElementById("select1").onchange();
Check the running code link below.
http://jsfiddle.net/f97u5nLa/33/

focus a select on any option selected from other select

I have 2 selects and what I need is to focus the 2nd select when selecting any option from the 1st select. My code is bellow as a sinpet code but it only set focus the 2nd select when a value is a number.
var acti = document.getElementById('activity');
var tip = document.getElementById('type');
activity.onchange = function () {
switch (this.value) {
case '1':
type.focus();
break;
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="activity">
<option value="" selected="">choose one</option>
<option value="1">Act 1</option>
<option value="2">Act 2</option>
<option value="3">Act 3</option>
<option value="4">Act 4</option>
</select>
<select id="type">
<option value="">choose one</option>
</select>
I think this would work:
$('#activity').change(function(){ $('#type').focus() })
$('#activity').change(function(){
$('#type').focus()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="activity">
<option value="" selected="">choose one</option>
<option value="1">Act 1</option>
<option value="2">Act 2</option>
<option value="3">Act 3</option>
<option value="4">Act 4</option>
</select>
<select id="type">
<option value="">choose one</option>
</select>
This works:
Als note when you run this snippet only case '1': will trigger the focus with this code.
var acti = document.getElementById('activity');
var tip = document.getElementById('type');
acti.onchange = function () {
switch (this.value) {
case '1':
tip.focus();
break;
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="activity">
<option value="" selected="">choose one</option>
<option value="1">Act 1</option>
<option value="2">Act 2</option>
<option value="3">Act 3</option>
<option value="4">Act 4</option>
</select>
<select id="type">
<option value="">choose one</option>
</select>

Auto complete type in text field from a dropdown

I don't know if it is simple or no. What I want to solve is,
One drop down "select" form field is there, another "input type="text" " field is below. Some options are there in "select dropdown". When I type in Below "input type="text" " field, There should be some suggestions from the above "select" dropdown field (like Auto Complete). Any help?
You can use the normal <select> tag with Select2:
$(function () {
$("select").select2({
width: 250
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<select name="" id="">
<option value="item-1">Item 1</option>
<option value="item-2">Item 2</option>
<option value="item-3">Item 3</option>
<option value="item-4">Item 4</option>
<option value="item-5">Item 5</option>
<option value="entry-1">Entry 1</option>
<option value="entry-2">Entry 2</option>
<option value="entry-3">Entry 3</option>
<option value="entry-4">Entry 4</option>
<option value="entry-5">Entry 5</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
<option value="option-4">Option 4</option>
<option value="option-5">Option 5</option>
</select>

How to make chosen menu disabled by default

Here, I have an example of jquery-chosen with modal dialog. What I want is on first open of the dialog, the chosen to not show the items. I read the documentation and I don't find anything.
So in the current example the modal options should be closed after running the fiddle example:
HTML
<div id="dialog">
<label for="options1">Modal Options</label>
<select id="options1" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
</select>
</div>
<label for="options1">Options</label>
<select id="options2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
</select>
JS
$(function(){
$("select").chosen();
$("#dialog").dialog({modal: true, width:400, height:"auto"});
});
Call jQuery chosen after calling dialog.
$(function(){
$("#dialog").dialog({modal: true, width:400, height:"auto"});
$("select").chosen();
});

jQuery two dropdown menus? (dynamically)

if I have two dropdowns such as:
<select>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
</select>
followed by:
<select>
<option value="option5">option 5</option>
<option value="option8">option 8</option>
<option value="option9">option 9</option>
</select>
how can i make it so that if from the first dropdown someone selects option 2 that only option 9 is available from the second dropdown?
I was told i would need to store the values but am a bit lost on all this?
Thanks for any help.
John
Proof: http://jsfiddle.net/iambriansreed/VLvYA/
Disabled as requested and also auto selects option.
$('#first-select').change(function(){
$('#second-select option').prop('disabled',false);
if(this.value == 'option2')
$('#second-select option:not([value="option9"])')
.prop('disabled',true).parent().val('option9');
});​
I am assuming that you want to remove 2nd drop down options based on the option selected index from drop down 1.
EDIT: Removed extra clone that was not required.
DEMO
$(function () {
var $dd2Opt = $('#dd2 option').clone();
var $dd2 = $('#dd2');
$('#dd1').change(function () {
$dd2.empty().append($dd2Opt.slice(this.selectedIndex + 1));
});
});
HTML
<select id="dd1">
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
</select>
<select id="dd2">
<option value="option5">option 5</option>
<option value="option8">option 8</option>
<option value="option9">option 9</option>
</select>
var opts = $('select.second option');
$('select:first').on('change',function() {
if(this.value == 'option2') {
$(this).next('select.second').empty().append(opts[this.selectedIndex + 1]).change();
} else {
$(this).next('select.second').empty().append(opts).change();
}
})
HTML
<select>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
</select>
<select class="second">
<option value="option5">option 5</option>
<option value="option8">option 8</option>
<option value="option9">option 9</option>
</select>
Live Proof
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#mainSelect').live('change', function () {
$('#subSelect option').hide();
$('#subSelect option[data-option="' + $(this).val() + '"]').show();
$('#subSelect option:visible:first').attr('selected', true);
});
$('#mainSelect').trigger('change');
});
</script>
</head>
<body>
<select id="mainSelect">
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
</select>
<select id="subSelect">
<option value="option5" data-option="option1">option 5</option>
<option value="option8" data-option="option3">option 8</option>
<option value="option9" data-option="option2">option 9</option>
</select>
</body>
</html>

Categories