时间戳

首页 > 解决方案 > 检查在 jQuery Bootstrap 多选中单击了哪个 optgroup

javascript - 检查在 jQuery Bootstrap 多选中单击了哪个 optgroup

问题描述

我想知道回调函数中提供的option参数是否代表元素。onChangeoptgroup MyGroup

当我在 Chrome 调试器中探索option时，我得到以下我不理解的输出： 在此处输入图像描述

我在互联网上找到的有关信息n.fn.init告诉我该对象尚未实例化，因此它以这种方式显示。我在 Javascript/jQuery 方面的知识太差，无法理解并自行解决此问题。

我的问题：

我如何在onChange函数中访问option参数？

例如，当我将 an 分配id给 the时optgroup，它​​会帮助我，它会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, 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>

标签： javascriptjquery

解决方案

option在您的函数参数中可能是一个 jQuery 对象数组。

因为option在这个例子中可以是一个选项数组，由于选择了一个optgroup你需要迭代或映射数组并提取你需要的信息而改变的选项。

在这个例子中，一个选项值数组被输出到控制台。

根据要求编辑此示例现在还输出一个选项数组id。

艾尔邦迪编辑：

将以下代码放入onChange回调函数适用于所有可能性。optgroup当只有一个元素时，Steve0 的第一个版本不起作用。此外，我的扩展代码 - 基于原始 Steve0 的答案 - 返回idforoptgroup或item取决于哪个被点击：

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>

推荐阅读