I want to show only options in the second dropdown (child) attribute data-value based on first dropdown value (parent) after change, and hide the rest of options.
$('.custom_select').select2()
$('select[name=parent]').on('change', function(){
// show only options from child equals to this.val()
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<select class="custom_select" name="parent">
<option value="1">example 1</option>
<option value="1">example 1</option>
<option value="2">example 2</option>
<option value="3">example 3</option>
</select>
<select class="custom_select" name="child">
<option data-value="1">child 1</option>
<option data-value="1">child 1</option>
<option data-value="2">child 2</option>
<option data-value="3">child 3</option>
</select>
You can get value of first select box and then compare it with option of second select box depending on that hide or show options i.e :
$('.custom_select').select2()
$('select[name=parent]').on('change', function() {
//getting value
var val = $(this).val();
//looping through options
$('select[name=child] option').each(function() {
var self = $(this);
if (self.attr("data-value") == val) {
//if the option have that values show option
$("select[name=child] option[data-value='" + val + "']").prop('disabled', false);
} else {
//other options which don't have selected value hide them
$("select[name=child] option:not(:contains('" + val + "'))").prop('disabled', true);
}
});
});
.select2-container--default .select2-results__option[aria-disabled=true] {
display: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<select class="custom_select" name="parent">
<option value="1">example 1</option>
<option value="2">example 2</option>
<option value="3">example 3</option>
</select>
<select class="custom_select" name="child">
<option data-value="1">child 1</option>
<option data-value="2">child 2</option>
<option data-value="3">child 3</option>
</select>
$(document).ready(function() {
$("#child").children('option:gt(0)').hide();
$('select').select2({ width: '100%', placeholder: "Select an Option", allowClear: true });
})
function setOption() {
var id=$("#parent").val();
$('#child').select2('destroy');
$("#child").children('option').hide();
$("#child").children("option[data-value^=" +id + "]").show();
$('#child').select2({ width: '100%', placeholder: "Select an Option", allowClear: true });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<select class="custom_select" name="parent" id="parent" onchage=setOption()>
<option value="1">example 1</option>
<option value="1">example 1</option>
<option value="2">example 2</option>
<option value="3">example 3</option>
</select>
<select class="custom_select" name="child" id="child">
<option data-value="1">child 1</option>
<option data-value="1">child 1</option>
<option data-value="2">child 2</option>
<option data-value="3">child 3</option>
</select>
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>
I am attempting to use an optgroup label to select all of the option in the group.
This is working fine, however, when I also select a group <option> it selects all optgroup elements. How do I make it so selection is based on only the optgrouptag?
$(document).ready(function() {
$("optgroup").on("click", function() {
$(this).children("option").prop("selected", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<optgroup label="Group1">
<option value="11">Option 1</option>
<option value="12">Option 2</option>
</optgroup>
<optgroup label="Group2">
<option value="21">Option 1</option>
<option value="22">Option 2</option>
</optgroup>
</select>
check the tag name of the element since it will bubble.. loop thru each of the options and only check ones that are not checked.
$(document).ready(function() {
$("optgroup").on("click", function(e) {
if(e.target.tagName === 'OPTGROUP'){
$(this).children("option").each(function(){
this.selected = !this.selected;
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple size=6>
<optgroup label="Group1">
<option value="11">Option 1</option>
<option value="12">Option 2</option>
</optgroup>
<optgroup label="Group2">
<option value="21">Option 1</option>
<option value="22">Option 2</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 a form, and I'm trying to disable or hide options in a select form element which have a particular data-id attribute. Example form:
<fieldset id="fuu">
<select name="bar1">
<option value="option1" data-id="available">Option 1</option>
<option value="option2" data-id="notAvailable">Option 2</option>
<option value="option3" data-id="available">Option 3</option>
</select>
<select name="bar2">
<option value="anotherOption1" data-id="available">Option 1</option>
<option value="anotherOption2" data-id="notAvailable">Option 2</option>
<option value="anotherOption3" data-id="available">Option 3</option>
</select>
</fieldset>
I would like to hide (and disable for browsers which don't support hiding) the options with data-id of "notAvailable".
Here is what I've tried:
<script>
$(document).ready(function () {
//hide unavailable options
var unavailable = notAvailable;
$('#fuu select option').each(function (event) {
if ($(this).attr("data-id") !== unavailable) {
$(this).hide().prop('disabled', true);
}
});
});
</script>
My selector seems to fail, because when I the below code to log the result, I get "notAvailable : undefined" 127 times (one for each option in my form)
<script>
$(document).ready(function () {
//test by logging
var unavailable = notAvailable;
$('#fuu select option').each(function (event) {
if ($(this).attr("data-id") !== unavailable) {
var loggedID = $(this).attr("data-id");
console.log(unavailable + " : " + loggedID);
}
});
});
</script>
Thank you for your help!
Try following code:
$("#fuu select option[data-id='notAvailable']").hide().prop('disabled', true);
Try This :
$(document).ready(function(){
$('select option').each(function(){
if($(this).attr('data-id')=='notAvailable'){
$(this).prop('disabled',true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="fuu">
<select name="bar1">
<option value="option1" data-id="available">Option 1</option>
<option value="option2" data-id="notAvailable">Option 2</option>
<option value="option3" data-id="available">Option 3</option>
<select>
<select name="bar2">
<option value="anotherOption1" data-id="available">Option 1</option>
<option value="anotherOption2" data-id="notAvailable">Option 2</option>
<option value="anotherOption3" data-id="available">Option 3</option>
</select>
Provide this under quotes var unavailable = "notAvailable";
Change the condition as $(this).attr("data-id") == unavailable
Example:
$(document).ready(function() {
//hide unavailable options
var unavailable = "notAvailable";
$('#fuu select option').each(function(event) {
if ($(this).attr("data-id") == unavailable) {
$(this).hide().prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="fuu">
<select name="bar1">
<option value="option1" data-id="available">Option 1</option>
<option value="option2" data-id="notAvailable">Option 2</option>
<option value="option3" data-id="available">Option 3</option>
</select>
<select name="bar2">
<option value="anotherOption1" data-id="available">Option 1</option>
<option value="anotherOption2" data-id="notAvailable">Option 2</option>
<option value="anotherOption3" data-id="available">Option 3</option>
</select>
</fieldset>
I have two select box like this.
<select id="select1">
<option value="1">product 1</option>
<option value="2">product 2</option>
<option value="3">product 3</option>
</select>
<select id="select2">
<option value="1">sub product 1</option>
<option value="2">sub product 2</option>
<option value="3">sub product 1</option>
<option value="4">sub product 1</option>
<option value="5">sub product 3</option>
</select>
I want to create auto generate values of second select box based on we chose from first select box, ex I choose product 1, the second select box will only contain sub product 1.
You can use a data attribute like data-parent in select2 for identifying which product's sub-product it is. Then in select1 change event you can use filter method and the data-parent attribute to hide and show options like following.
$('#select1').change(function() {
var parent = $(this);
var visibleOptions = $('#select2 option').hide().filter(function() {
return $(this).data('parent') == parent.val();
}).show();
if(visibleOptions.length)
visibleOptions.eq(0).prop('selected', true);
else
$('#select2').val('');
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="1">product 1</option>
<option value="2">product 2</option>
<option value="3">product 3</option>
</select>
<select id="select2">
<option data-parent="1" value="1">sub product 1</option>
<option data-parent="2" value="2">sub product 2</option>
<option data-parent="1" value="3">sub product 1</option>
<option data-parent="1" value="4">sub product 1</option>
<option data-parent="3" value="5">sub product 3</option>
</select>
You can use this code:
Here is the working example: https://output.jsbin.com/ronoteb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var options="";
$("#select1").on('change',function(){
var value=$(this).val();
if(value=="1")
{
options="<option>Select 2</option>"
+"<option value='1'>sub product 1</option>"
+"<option value='2'>sub product 2</option>";
$("#select2").html(options);
}
else if(value=="2")
{
options="<option>Select 2</option>"
+"<option value='3'>sub product 3</option>"
+"<option value='4'>sub product 4</option>";
$("#select2").html(options);
}
else if(value=="3")
{
options="<option>Select 2</option>"
+"<option value='5'>sub product 5</option>"
+"<option value='6'>sub product 6</option>";
$("#select2").html(options);
}
else
$("#select2").find('option').remove()
});
});
</script>
</head>
<body>
<select id="select1">
<option value="" selected>select</option>
<option value="1">product 1</option>
<option value="2">product 2</option>
<option value="3">product 3</option>
</select>
<select id="select2">
</select>
</body>
</html>
To generate the dropdown on change of another select dropdown, you can initially, generate the object containing value and text to display for the second dropdown.
Then on change of first select dropdown value, you can iterate through the array and populate the second dropdown.
let selectOptions = {
1: [{
value : "1",
text: "sub product 1"
}],
2: [{
value : "2",
text: "sub product 2"
}],
3: [{
value : "3",
text: "sub product 3"
}]
}
$("#select1").change(function(){
let select2 = $("#select2");
select2.empty();
console.log(selectOptions[$(this).val()]);
selectOptions[$(this).val()].forEach(function(item){
select2.append($("<option />").val(item.value).text(item.text));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="1">product 1</option>
<option value="2">product 2</option>
<option value="3">product 3</option>
</select>
<select id="select2">
<option value="1">sub product 1</option>
<option value="2">sub product 2</option>
<option value="3">sub product 3</option>
<option value="4">sub product 4</option>
<option value="5">sub product 5</option>
</select>