I have Two Select Options in that Based on first select options i need to load second select options values. Second select option having multiselect option The HTML code is below.
<div>
<select name="Control" id="ctrl_typ" onchange="Control_change()">
<option selected="selected" disabled="disabled">COMMAND</option>
<option disabled="disabled"></option>
<option value="1">First</option>
<option value="2">Second</option>
</select>
<select name="Names[]" multiple id="nameid" size="30">
</select>
</div>
JS part is below.
var maxSelect=1000;
$( document ).ready(function()
{
$('#nameid').multiselect({
columns: 1,
texts: {
placeholder: 'Name',
search : 'Search Names'
},
search: true,
maxWidth:467,
maxHeight:400,
selectAll: true,
selectGroup: true,
onOptionClick: function( element, option )
{
if( $(element).val().length > maxSelect ) {
if( $(option).is(':checked') ) {
var thisVals = $(element).val();
thisVals.splice(
thisVals.indexOf( $(option).val() ), 1
);
$(element).val( thisVals );
$(option).prop( 'checked', false ).closest('li')
.toggleClass('selected');
}
}
else if( $(element).val().length == maxSelect )
{
$(element).next('.ms-options-wrap')
.find('li:not(.selected)').addClass('disabled')
.find('input[type="checkbox"]')
.attr( 'disabled', 'disabled' );
}
// max select not reached, make sure any disabled
// checkboxes are available
else {
$(element).next('.ms-options-wrap')
.find('li.disabled').removeClass('disabled')
.find('input[type="checkbox"]')
.removeAttr( 'disabled' );
}
}
});
function Control_change()
{
var ctrlval=$("#ctrl_typ option:selected").val();
var Gload="";
if(ctrlval==1)
{
Gload="<select name="Names[]" multiple id="nameid" size="30">
<optgroup label='Label 1'>
<option value='1'>One</option>
<option value'2'>Two</option>
<option value='3'>Three</option>
</optgroup>
<optgroup label='Label 2'>
<option value='4'>Four</option>
<option value'5'>Five</option>
<option value='6'>Six</option>
</optgroup>
</select>";
$('#nameid').replaceWith(Gload);
}
else if(ctrlval==2)
{
Gload="<select name="Names[]" multiple id="nameid" size="30">
<optgroup label='Label 3'>
<option value='1'>One</option>
<option value'2'>Two</option>
<option value='3'>Three</option>
</optgroup>
<optgroup label='Label 4'>
<option value='4'>Four</option>
<option value'5'>Five</option>
<option value='6'>Six</option>
</optgroup>
</select>";
$('#nameid').replaceWith(Gload);
}
}
I am tried the above code but is not working well while select multiselect dropdown it giving error guide me to resolve the issue. I want to load the multiselect dropdown with group values.
There are several issues. the biggest is the use of double quotes around your select html. I have replaced that with template literal backticks (`)
The other is that you are replacing the select instead of replacing the content
Here is a running version that may or may not look like you need it to do but it does change the select based on the other. I have not changed anything except the syntax errors and the missing includes
var maxSelect = 1000;
$(document).ready(function() {
$('#nameid').multiselect({
columns: 1,
texts: {
placeholder: 'Name',
search: 'Search Names'
},
search: true,
maxWidth: 467,
maxHeight: 400,
selectAll: true,
selectGroup: true,
onOptionClick: function(element, option) {
if ($(element).val().length > maxSelect) {
if ($(option).is(':checked')) {
var thisVals = $(element).val();
thisVals.splice(
thisVals.indexOf($(option).val()), 1
);
$(element).val(thisVals);
$(option).prop('checked', false).closest('li')
.toggleClass('selected');
}
} else if ($(element).val().length == maxSelect) {
$(element).next('.ms-options-wrap')
.find('li:not(.selected)').addClass('disabled')
.find('input[type="checkbox"]')
.attr('disabled', 'disabled');
}
// max select not reached, make sure any disabled
// checkboxes are available
else {
$(element).next('.ms-options-wrap')
.find('li.disabled').removeClass('disabled')
.find('input[type="checkbox"]')
.removeAttr('disabled');
}
}
});
})
function Control_change() {
var ctrlval = $("#ctrl_typ option:selected").val();
var Gload = "";
if (ctrlval == 1) {
Gload = `<optgroup label='Label 1'>
<option value='1'>One</option>
<option value'2'>Two</option>
<option value='3'>Three</option>
</optgroup>
<optgroup label='Label 2'>
<option value='4'>Four</option>
<option value'5'>Five</option>
<option value='6'>Six</option>
</optgroup>`;
$('#nameid').html(Gload);
} else if (ctrlval == 2) {
Gload = `<optgroup label='Label 3'>
<option value='1'>One</option>
<option value'2'>Two</option>
<option value='3'>Three</option>
</optgroup>
<optgroup label='Label 4'>
<option value='4'>Four</option>
<option value'5'>Five</option>
<option value='6'>Six</option>
</optgroup>`;
$('#nameid').html(Gload);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/jquery-multiselect@1.0.0/jquery-MultiSelect.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/jquery-multiselect@1.0.0/jquery-MultiSelect.min.css
" rel="stylesheet">
<div>
<select name="Control" id="ctrl_typ" onchange="Control_change()">
<option selected="selected" disabled="disabled">COMMAND</option>
<option disabled="disabled"></option>
<option value="1">First</option>
<option value="2">Second</option>
</select>
<select name="Names[]" multiple id="nameid" size="30">
</select>
</div>
Here is a version using the documentation found here https://springstubbe.us/projects/jquery-multiselect/
var maxSelect = 3; // Keep this for your max selection logic
$(function() {
// Initialize the multiselect with optgroup support
$('#nameid').multiselect({
columns: 1,
texts: {
placeholder: 'Select Names',
search: 'Search Names'
},
search: true,
maxWidth: 467,
maxHeight: 400,
selectAll: true,
selectGroup: true, // Crucial for optgroup functionality
onOptionClick: function(element, option) {
var selectedValues = $(element).val() || [];
if (selectedValues.length > maxSelect) {
if ($(option).is(':checked')) {
var clickedValue = $(option).val();
var indexToRemove = selectedValues.indexOf(clickedValue);
if (indexToRemove > -1) {
selectedValues.splice(indexToRemove, 1);
}
$(element).val(selectedValues);
$(option).prop('checked', false).closest('li').removeClass('selected');
alert('You can only select a maximum of ' + maxSelect + ' options.');
}
} else if (selectedValues.length === maxSelect) {
$(element).next('.ms-options-wrap')
.find('li:not(.selected)').addClass('disabled')
.find('input[type="checkbox"]')
.attr('disabled', 'disabled');
} else {
$(element).next('.ms-options-wrap')
.find('li.disabled').removeClass('disabled')
.find('input[type="checkbox"]')
.removeAttr('disabled');
}
}
});
// Handle change on the 'Control' dropdown
$('#ctrl_typ').on('change', function() {
var ctrlval = $(this).val();
let optionsToLoad = [];
if (ctrlval === '0') {
optionsToLoad = [allOptGroupsData[0]]; // Only Group 1
} else if (ctrlval === '1') {
optionsToLoad = [allOptGroupsData[1]]; // Only Group 2
} else if (ctrlval === 'all') {
optionsToLoad = allOptGroupsData; // All groups
} else if (ctrlval === 'clear') {
optionsToLoad = []; // Clear the list
}
if (!ctrlval || ctrlval === 'COMMAND' || ctrlval === 'clear') {
$('#nameid').multiselect('loadOptions', []); // Clear and disable
$('#nameid').multiselect('disable', true);
} else {
$('#nameid').multiselect('loadOptions', optionsToLoad);
$('#nameid').multiselect('disable', false); // Enable once options are loaded
}
});
// Initial state: clear and disable the multiselect if "COMMAND" is selected
$('#ctrl_typ').trigger('change');
});
body {
font-family: sans-serif;
padding: 20px;
}
div {
margin-bottom: 20px;
}
.ms-options-wrap {
margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@nobleclem/jquery-multiselect@2.4.24/jquery.multiselect.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nobleclem/jquery-multiselect@2.4.24/jquery.multiselect.min.css">
<div>
<label for="ctrl_typ">Select Control Group:</label>
<select name="Control" id="ctrl_typ">
<option selected="selected" disabled="disabled">COMMAND</option>
<option value="0">Show Group 1 Data</option>
<option value="1">Show Group 2 Data</option>
<option value="all">Show All Data</option>
<option value="clear">Clear List</option>
</select><br/>
<label for="nameid">Select Names:</label>
<select name="Names[]" id="nameid" multiple size="30"></select>
</div>
<script>
// Data structure that includes optgroups, directly from the documentation example
const allOptGroupsData = [{
label: 'Group 1',
options: [{
name: 'Option 1',
value: 1,
checked: false
}, {
name: 'Option 2',
value: 2,
checked: true
}, {
name: 'Option 3',
value: 3,
checked: false
}]
}, {
label: 'Group 2',
options: [{
name: 'Option 4',
value: 4,
checked: false
}, {
name: 'Option 5',
value: 5,
checked: true
}, {
name: 'Option 6',
value: 6,
checked: false
}]
}];
</script>