Check which optgroup has been clicked in jQuery Bootstrap Multiselect
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
3
I would like to know if the provided option parameter in the onChange callback function represents the optgroup MyGroup element.
When I explore option in the Chrome debugger I get the following output which I don't understand:
Information I found in internet regarding n.fn.init tells me that the object hasn't been instantiated yet and therefore it is displayed in that way. My knowledge in Javascript/jQuery is too poor to understand it and fix this issue on my own.
My Question:
How do I have in the onChange function access the option parameter?
It would for example help me when I assign an id to the optgroup and this id is returned and I can check it easily.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap onChange Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect(
{
enableClickableOptGroups: true,
onChange: function(option, select)
{
// how to access option.???
}
}
)
});
</script>
</head>
<body>
<select id="example" multiple="multiple">
<optgroup label="MyGroup" id="MyGroupId">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select>
</body>
</html>javascript jquery
asked Nov 21 '18 at 23:07
Al BundyAl Bundy
2,37421743
add a comment |
3
I would like to know if the provided option parameter in the onChange callback function represents the optgroup MyGroup element.
When I explore option in the Chrome debugger I get the following output which I don't understand:
Information I found in internet regarding n.fn.init tells me that the object hasn't been instantiated yet and therefore it is displayed in that way. My knowledge in Javascript/jQuery is too poor to understand it and fix this issue on my own.
My Question:
How do I have in the onChange function access the option parameter?
It would for example help me when I assign an id to the optgroup and this id is returned and I can check it easily.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap onChange Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect(
{
enableClickableOptGroups: true,
onChange: function(option, select)
{
// how to access option.???
}
}
)
});
</script>
</head>
<body>
<select id="example" multiple="multiple">
<optgroup label="MyGroup" id="MyGroupId">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select>
</body>
</html>javascript jquery
asked Nov 21 '18 at 23:07
Al BundyAl Bundy
2,37421743
add a comment |
3
3
3
I would like to know if the provided option parameter in the onChange callback function represents the optgroup MyGroup element.
When I explore option in the Chrome debugger I get the following output which I don't understand:
Information I found in internet regarding n.fn.init tells me that the object hasn't been instantiated yet and therefore it is displayed in that way. My knowledge in Javascript/jQuery is too poor to understand it and fix this issue on my own.
My Question:
How do I have in the onChange function access the option parameter?
It would for example help me when I assign an id to the optgroup and this id is returned and I can check it easily.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap onChange Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect(
{
enableClickableOptGroups: true,
onChange: function(option, select)
{
// how to access option.???
}
}
)
});
</script>
</head>
<body>
<select id="example" multiple="multiple">
<optgroup label="MyGroup" id="MyGroupId">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select>
</body>
</html>javascript jquery
asked Nov 21 '18 at 23:07
Al BundyAl Bundy
2,37421743
I would like to know if the provided option parameter in the onChange callback function represents the optgroup MyGroup element.
When I explore option in the Chrome debugger I get the following output which I don't understand:
Information I found in internet regarding n.fn.init tells me that the object hasn't been instantiated yet and therefore it is displayed in that way. My knowledge in Javascript/jQuery is too poor to understand it and fix this issue on my own.
My Question:
How do I have in the onChange function access the option parameter?
It would for example help me when I assign an id to the optgroup and this id is returned and I can check it easily.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap onChange Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect(
{
enableClickableOptGroups: true,
onChange: function(option, select)
{
// how to access option.???
}
}
)
});
</script>
</head>
<body>
<select id="example" multiple="multiple">
<optgroup label="MyGroup" id="MyGroupId">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap onChange Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect(
{
enableClickableOptGroups: true,
onChange: function(option, select)
{
// how to access option.???
}
}
)
});
</script>
</head>
<body>
<select id="example" multiple="multiple">
<optgroup label="MyGroup" id="MyGroupId">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap onChange Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect(
{
enableClickableOptGroups: true,
onChange: function(option, select)
{
// how to access option.???
}
}
)
});
</script>
</head>
<body>
<select id="example" multiple="multiple">
<optgroup label="MyGroup" id="MyGroupId">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select>
</body>
</html>javascript jquery
javascript jquery
asked Nov 21 '18 at 23:07
Al BundyAl Bundy
2,37421743
asked Nov 21 '18 at 23:07
Al BundyAl Bundy
2,37421743
edited Nov 21 '18 at 23:48
Al Bundy
asked Nov 21 '18 at 23:07
Al BundyAl Bundy
2,37421743
asked Nov 21 '18 at 23:07
Al BundyAl Bundy
2,37421743
asked Nov 21 '18 at 23:07
Al BundyAl Bundy
2,37421743
2,37421743
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
4
option in your function parameters is potentially an array of jQuery objects.
Because option in this example can be an array of options that changed due to the selection of an optgroup you need to iterate or Map the array and extract the information you need.
In this example an array of the option values is outputted to the console.
Edited as requested this example now outputs an array of option id also.
Edited by Al Bundy:
Placing the following code into the onChange callback function works for all possibilities. The first version from Steve0 doesn't work when optgroup has only 1 element. Also, my extended code - based on the original Steve0's answer - returns the id either for optgroup or the item depending which one was clicked:
optionId = Array.isArray(option)
? $(option[0]).closest("optgroup").attr("id")
: option.attr("id");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap onChange Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect(
{
enableClickableOptGroups: true,
onChange:function(option, checked, value)
{
//console.log(option);
console.log($.map(option, x=>{return $(x).val();}));
//console.log($.map(option, x=>{return $(x).attr("id");}));
if(option.length > 1){
//if I have more than one picked, then return the ID of the first-items group
console.log($(option[0]).closest("optgroup").attr("id"));
}
// how to access option.???
//console.log($(option).val());
// Al Bundy extension:
optionId = Array.isArray(option)
? $(option[0]).closest("optgroup").attr("id")
: option.attr("id");
}
}
)
});
</script>
</head>
<body>
<select id="example" multiple="multiple">
<optgroup label="MyGroup" id='YourGroup'>
<option id="opt1" value="1">Option 1</option>
<option id="opt2" value="2">Option 2</option>
<option id="opt3" value="3">Option 3</option>
</optgroup>
</select>
</body>
</html>edited Nov 22 '18 at 18:28
Al Bundy
2,37421743
answered Nov 21 '18 at 23:20
Steve0Steve0
1,7632922
OMG Steve0. I never saw this. OK, this works! I get - as you write - all changed values. Is there a way I would get theidof theoptgroupif I assign one? +1 for the solution!
– Al Bundy
Nov 21 '18 at 23:42
You need to be a little more specific. What do you want when an optgroup is selected and what do you want when a single option is selected.
– Steve0
Nov 21 '18 at 23:49
When the optionMyGroupis clicked I need in theonChangecallback function theidfrom theoptgroupwith the labelMyGroupwhich has in my example the valueMyGroupId. That's all.
– Al Bundy
Nov 21 '18 at 23:50
Bingo! I can only upvote once. I will study the functionmapandclosestyou are using. I never heard of them but as I wrote my JavaScript/jQuery knowledge is poor. Thank you Steve0, good night.
– Al Bundy
Nov 21 '18 at 23:56
2
I added some code to your answer. I hope you don't mind.
– Al Bundy
Nov 22 '18 at 14:01
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421703%2fcheck-which-optgroup-has-been-clicked-in-jquery-bootstrap-multiselect%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
4
option in your function parameters is potentially an array of jQuery objects.
Because option in this example can be an array of options that changed due to the selection of an optgroup you need to iterate or Map the array and extract the information you need.
In this example an array of the option values is outputted to the console.
Edited as requested this example now outputs an array of option id also.
Edited by Al Bundy:
Placing the following code into the onChange callback function works for all possibilities. The first version from Steve0 doesn't work when optgroup has only 1 element. Also, my extended code - based on the original Steve0's answer - returns the id either for optgroup or the item depending which one was clicked:
optionId = Array.isArray(option)
? $(option[0]).closest("optgroup").attr("id")
: option.attr("id");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap onChange Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect(
{
enableClickableOptGroups: true,
onChange:function(option, checked, value)
{
//console.log(option);
console.log($.map(option, x=>{return $(x).val();}));
//console.log($.map(option, x=>{return $(x).attr("id");}));
if(option.length > 1){
//if I have more than one picked, then return the ID of the first-items group
console.log($(option[0]).closest("optgroup").attr("id"));
}
// how to access option.???
//console.log($(option).val());
// Al Bundy extension:
optionId = Array.isArray(option)
? $(option[0]).closest("optgroup").attr("id")
: option.attr("id");
}
}
)
});
</script>
</head>
<body>
<select id="example" multiple="multiple">
<optgroup label="MyGroup" id='YourGroup'>
<option id="opt1" value="1">Option 1</option>
<option id="opt2" value="2">Option 2</option>
<option id="opt3" value="3">Option 3</option>
</optgroup>
</select>
</body>
</html>edited Nov 22 '18 at 18:28
Al Bundy
2,37421743
answered Nov 21 '18 at 23:20
Steve0Steve0
1,7632922
OMG Steve0. I never saw this. OK, this works! I get - as you write - all changed values. Is there a way I would get theidof theoptgroupif I assign one? +1 for the solution!
– Al Bundy
Nov 21 '18 at 23:42
You need to be a little more specific. What do you want when an optgroup is selected and what do you want when a single option is selected.
– Steve0
Nov 21 '18 at 23:49
When the optionMyGroupis clicked I need in theonChangecallback function theidfrom theoptgroupwith the labelMyGroupwhich has in my example the valueMyGroupId. That's all.
– Al Bundy
Nov 21 '18 at 23:50
Bingo! I can only upvote once. I will study the functionmapandclosestyou are using. I never heard of them but as I wrote my JavaScript/jQuery knowledge is poor. Thank you Steve0, good night.
– Al Bundy
Nov 21 '18 at 23:56
2
I added some code to your answer. I hope you don't mind.
– Al Bundy
Nov 22 '18 at 14:01
add a comment |
4
option in your function parameters is potentially an array of jQuery objects.
Because option in this example can be an array of options that changed due to the selection of an optgroup you need to iterate or Map the array and extract the information you need.
In this example an array of the option values is outputted to the console.
Edited as requested this example now outputs an array of option id also.
Edited by Al Bundy:
Placing the following code into the onChange callback function works for all possibilities. The first version from Steve0 doesn't work when optgroup has only 1 element. Also, my extended code - based on the original Steve0's answer - returns the id either for optgroup or the item depending which one was clicked:
optionId = Array.isArray(option)
? $(option[0]).closest("optgroup").attr("id")
: option.attr("id");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap onChange Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect(
{
enableClickableOptGroups: true,
onChange:function(option, checked, value)
{
//console.log(option);
console.log($.map(option, x=>{return $(x).val();}));
//console.log($.map(option, x=>{return $(x).attr("id");}));
if(option.length > 1){
//if I have more than one picked, then return the ID of the first-items group
console.log($(option[0]).closest("optgroup").attr("id"));
}
// how to access option.???
//console.log($(option).val());
// Al Bundy extension:
optionId = Array.isArray(option)
? $(option[0]).closest("optgroup").attr("id")
: option.attr("id");
}
}
)
});
</script>
</head>
<body>
<select id="example" multiple="multiple">
<optgroup label="MyGroup" id='YourGroup'>
<option id="opt1" value="1">Option 1</option>
<option id="opt2" value="2">Option 2</option>
<option id="opt3" value="3">Option 3</option>
</optgroup>
</select>
</body>
</html>edited Nov 22 '18 at 18:28
Al Bundy
2,37421743
answered Nov 21 '18 at 23:20
Steve0Steve0
1,7632922
OMG Steve0. I never saw this. OK, this works! I get - as you write - all changed values. Is there a way I would get theidof theoptgroupif I assign one? +1 for the solution!
– Al Bundy
Nov 21 '18 at 23:42
You need to be a little more specific. What do you want when an optgroup is selected and what do you want when a single option is selected.
– Steve0
Nov 21 '18 at 23:49
When the optionMyGroupis clicked I need in theonChangecallback function theidfrom theoptgroupwith the labelMyGroupwhich has in my example the valueMyGroupId. That's all.
– Al Bundy
Nov 21 '18 at 23:50
Bingo! I can only upvote once. I will study the functionmapandclosestyou are using. I never heard of them but as I wrote my JavaScript/jQuery knowledge is poor. Thank you Steve0, good night.
– Al Bundy
Nov 21 '18 at 23:56
2
I added some code to your answer. I hope you don't mind.
– Al Bundy
Nov 22 '18 at 14:01
add a comment |
4
4
4
option in your function parameters is potentially an array of jQuery objects.
Because option in this example can be an array of options that changed due to the selection of an optgroup you need to iterate or Map the array and extract the information you need.
In this example an array of the option values is outputted to the console.
Edited as requested this example now outputs an array of option id also.
Edited by Al Bundy:
Placing the following code into the onChange callback function works for all possibilities. The first version from Steve0 doesn't work when optgroup has only 1 element. Also, my extended code - based on the original Steve0's answer - returns the id either for optgroup or the item depending which one was clicked:
optionId = Array.isArray(option)
? $(option[0]).closest("optgroup").attr("id")
: option.attr("id");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap onChange Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect(
{
enableClickableOptGroups: true,
onChange:function(option, checked, value)
{
//console.log(option);
console.log($.map(option, x=>{return $(x).val();}));
//console.log($.map(option, x=>{return $(x).attr("id");}));
if(option.length > 1){
//if I have more than one picked, then return the ID of the first-items group
console.log($(option[0]).closest("optgroup").attr("id"));
}
// how to access option.???
//console.log($(option).val());
// Al Bundy extension:
optionId = Array.isArray(option)
? $(option[0]).closest("optgroup").attr("id")
: option.attr("id");
}
}
)
});
</script>
</head>
<body>
<select id="example" multiple="multiple">
<optgroup label="MyGroup" id='YourGroup'>
<option id="opt1" value="1">Option 1</option>
<option id="opt2" value="2">Option 2</option>
<option id="opt3" value="3">Option 3</option>
</optgroup>
</select>
</body>
</html>edited Nov 22 '18 at 18:28
Al Bundy
2,37421743
answered Nov 21 '18 at 23:20
Steve0Steve0
1,7632922
option in your function parameters is potentially an array of jQuery objects.
Because option in this example can be an array of options that changed due to the selection of an optgroup you need to iterate or Map the array and extract the information you need.
In this example an array of the option values is outputted to the console.
Edited as requested this example now outputs an array of option id also.
Edited by Al Bundy:
Placing the following code into the onChange callback function works for all possibilities. The first version from Steve0 doesn't work when optgroup has only 1 element. Also, my extended code - based on the original Steve0's answer - returns the id either for optgroup or the item depending which one was clicked:
optionId = Array.isArray(option)
? $(option[0]).closest("optgroup").attr("id")
: option.attr("id");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap onChange Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect(
{
enableClickableOptGroups: true,
onChange:function(option, checked, value)
{
//console.log(option);
console.log($.map(option, x=>{return $(x).val();}));
//console.log($.map(option, x=>{return $(x).attr("id");}));
if(option.length > 1){
//if I have more than one picked, then return the ID of the first-items group
console.log($(option[0]).closest("optgroup").attr("id"));
}
// how to access option.???
//console.log($(option).val());
// Al Bundy extension:
optionId = Array.isArray(option)
? $(option[0]).closest("optgroup").attr("id")
: option.attr("id");
}
}
)
});
</script>
</head>
<body>
<select id="example" multiple="multiple">
<optgroup label="MyGroup" id='YourGroup'>
<option id="opt1" value="1">Option 1</option>
<option id="opt2" value="2">Option 2</option>
<option id="opt3" value="3">Option 3</option>
</optgroup>
</select>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap onChange Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect(
{
enableClickableOptGroups: true,
onChange:function(option, checked, value)
{
//console.log(option);
console.log($.map(option, x=>{return $(x).val();}));
//console.log($.map(option, x=>{return $(x).attr("id");}));
if(option.length > 1){
//if I have more than one picked, then return the ID of the first-items group
console.log($(option[0]).closest("optgroup").attr("id"));
}
// how to access option.???
//console.log($(option).val());
// Al Bundy extension:
optionId = Array.isArray(option)
? $(option[0]).closest("optgroup").attr("id")
: option.attr("id");
}
}
)
});
</script>
</head>
<body>
<select id="example" multiple="multiple">
<optgroup label="MyGroup" id='YourGroup'>
<option id="opt1" value="1">Option 1</option>
<option id="opt2" value="2">Option 2</option>
<option id="opt3" value="3">Option 3</option>
</optgroup>
</select>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap onChange Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidstutz/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect(
{
enableClickableOptGroups: true,
onChange:function(option, checked, value)
{
//console.log(option);
console.log($.map(option, x=>{return $(x).val();}));
//console.log($.map(option, x=>{return $(x).attr("id");}));
if(option.length > 1){
//if I have more than one picked, then return the ID of the first-items group
console.log($(option[0]).closest("optgroup").attr("id"));
}
// how to access option.???
//console.log($(option).val());
// Al Bundy extension:
optionId = Array.isArray(option)
? $(option[0]).closest("optgroup").attr("id")
: option.attr("id");
}
}
)
});
</script>
</head>
<body>
<select id="example" multiple="multiple">
<optgroup label="MyGroup" id='YourGroup'>
<option id="opt1" value="1">Option 1</option>
<option id="opt2" value="2">Option 2</option>
<option id="opt3" value="3">Option 3</option>
</optgroup>
</select>
</body>
</html>edited Nov 22 '18 at 18:28
Al Bundy
2,37421743
answered Nov 21 '18 at 23:20
Steve0Steve0
1,7632922
edited Nov 22 '18 at 18:28
Al Bundy
2,37421743
edited Nov 22 '18 at 18:28
Al Bundy
2,37421743
edited Nov 22 '18 at 18:28
Al Bundy
2,37421743
2,37421743
answered Nov 21 '18 at 23:20
Steve0Steve0
1,7632922
answered Nov 21 '18 at 23:20
Steve0Steve0
1,7632922
answered Nov 21 '18 at 23:20
Steve0Steve0
1,7632922
1,7632922
OMG Steve0. I never saw this. OK, this works! I get - as you write - all changed values. Is there a way I would get theidof theoptgroupif I assign one? +1 for the solution!
– Al Bundy
Nov 21 '18 at 23:42
You need to be a little more specific. What do you want when an optgroup is selected and what do you want when a single option is selected.
– Steve0
Nov 21 '18 at 23:49
When the optionMyGroupis clicked I need in theonChangecallback function theidfrom theoptgroupwith the labelMyGroupwhich has in my example the valueMyGroupId. That's all.
– Al Bundy
Nov 21 '18 at 23:50
Bingo! I can only upvote once. I will study the functionmapandclosestyou are using. I never heard of them but as I wrote my JavaScript/jQuery knowledge is poor. Thank you Steve0, good night.
– Al Bundy
Nov 21 '18 at 23:56
2
I added some code to your answer. I hope you don't mind.
– Al Bundy
Nov 22 '18 at 14:01
add a comment |
OMG Steve0. I never saw this. OK, this works! I get - as you write - all changed values. Is there a way I would get theidof theoptgroupif I assign one? +1 for the solution!
– Al Bundy
Nov 21 '18 at 23:42
You need to be a little more specific. What do you want when an optgroup is selected and what do you want when a single option is selected.
– Steve0
Nov 21 '18 at 23:49
When the optionMyGroupis clicked I need in theonChangecallback function theidfrom theoptgroupwith the labelMyGroupwhich has in my example the valueMyGroupId. That's all.
– Al Bundy
Nov 21 '18 at 23:50
Bingo! I can only upvote once. I will study the functionmapandclosestyou are using. I never heard of them but as I wrote my JavaScript/jQuery knowledge is poor. Thank you Steve0, good night.
– Al Bundy
Nov 21 '18 at 23:56
2
I added some code to your answer. I hope you don't mind.
– Al Bundy
Nov 22 '18 at 14:01
OMG Steve0. I never saw this. OK, this works! I get - as you write - all changed values. Is there a way I would get the
id of the optgroup if I assign one? +1 for the solution!– Al Bundy
Nov 21 '18 at 23:42
OMG Steve0. I never saw this. OK, this works! I get - as you write - all changed values. Is there a way I would get the
id of the optgroup if I assign one? +1 for the solution!– Al Bundy
Nov 21 '18 at 23:42
You need to be a little more specific. What do you want when an optgroup is selected and what do you want when a single option is selected.
– Steve0
Nov 21 '18 at 23:49
You need to be a little more specific. What do you want when an optgroup is selected and what do you want when a single option is selected.
– Steve0
Nov 21 '18 at 23:49
When the option
MyGroup is clicked I need in the onChange callback function the id from the optgroup with the label MyGroup which has in my example the value MyGroupId. That's all.– Al Bundy
Nov 21 '18 at 23:50
When the option
MyGroup is clicked I need in the onChange callback function the id from the optgroup with the label MyGroup which has in my example the value MyGroupId. That's all.– Al Bundy
Nov 21 '18 at 23:50
Bingo! I can only upvote once. I will study the function
map and closest you are using. I never heard of them but as I wrote my JavaScript/jQuery knowledge is poor. Thank you Steve0, good night.– Al Bundy
Nov 21 '18 at 23:56
Bingo! I can only upvote once. I will study the function
map and closest you are using. I never heard of them but as I wrote my JavaScript/jQuery knowledge is poor. Thank you Steve0, good night.– Al Bundy
Nov 21 '18 at 23:56
2
2
I added some code to your answer. I hope you don't mind.
– Al Bundy
Nov 22 '18 at 14:01
I added some code to your answer. I hope you don't mind.
– Al Bundy
Nov 22 '18 at 14:01
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421703%2fcheck-which-optgroup-has-been-clicked-in-jquery-bootstrap-multiselect%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
