javascript - 如何在 jquery 中添加选项以选择 optgroup?

标签 javascript jquery html select optgroup

我正在尝试用 javascript 填充 html 选择。现在我只需要做:

function addRow(selectID, testName) {
    var x = document.getElementById(selectID);
    var option = document.createElement("option");
    option.text = testName;
    x.add(option);
}    

for (var x = 0; x < testSet.length; x++) {
    addRow('select', testSet[x]);
}

其中 testSet 是一个字符串数组。这样我就有了完整的选择。现在我想使用 optgroup 升级 select 的填充,所以在我的 html 代码中,我有

<select onchange="selectionChanged()" 
style="width: 400px; height: 20px; vertical-align: middle;"
id="select"><optgroup label="OptionSet1"></optgroup>
<optgroup label="OptionSet2"></optgroup>
<optgroup label="OptionSet3"></optgroup>
</select>

现在要填写我的选项,我想我必须做类似的事情

for (var x = 0; x < testSet.length; x++) {
    if(testSet[x].indexOf("string1") != -1){
       // Add testSet[x] in OptionSet1
    }
    if(testSet[x].indexOf("string2") != -1){
       // Add testSet[x] in OptionSet2
    }
    if(testSet[x].indexOf("string3") != -1){
        // Add testSet[x] in OptionSet3
    }
}

“在 OptionSet 中添加 testSet[x]”我必须做什么? 我在网上阅读了一些内容,但找不到任何似乎对我有用的内容。

谢谢。

最佳答案

也许这给了你一点想法

如何去做

<html>
<head>
    <style>
        .overlay {
            background-color: rgba(0,0,0,0.5);
            width: 100%;
            height: 100%
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
    <select class="selectgroup" 
    style="width: 400px; height: 20px; vertical-align: middle;"
    id="select">
    <optgroup id="optgroup1" label="OptionSet1">
    </optgroup>
    <optgroup id="optgroup2" label="OptionSet2">
    </optgroup>
    <optgroup id="optgroup3" label="OptionSet3">
    </optgroup>
    </select>


    <script type="text/javascript">

        //create a option with a key name pertaining to the id of the optgroup
        //and set its value to array with a list of options

        var options = {
            "optgroup1" : new Array('red', 'blue', 'red'),
            "optgroup2" : new Array('thin', 'thick'),
            "optgroup3" : new Array('pencil', 'ballpen')
        };

        $(document).ready(function(){
            // loop all the options created
            for (var i in options) {
                // get value
                var elements = options[i];
                // get optgroup to insert new option
                var parentgroup = $('#' + i);
                // iterate and insert new option to optgroup
                for (var j = 0; j < elements.length; j++) {
                    parentgroup.append('<option>' + elements[j]+ '</option>')
                };

            }

        });

    </script>

</body>
</html>

您可以改进代码,使它对您的使用更有意义

谢谢

关于javascript - 如何在 jquery 中添加选项以选择 optgroup?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27185208/

相关文章:

Javascript写入文件而不覆盖

javascript - 如何从 html 和文本创建带有 jspdf 的 pdf?

javascript - _.findWhere从underscorejs到JQuery

javascript - 使用正则表达式验证 mm/dd/yyyy

html - 里面有表格的字段集。如何将它们放在同一条线上?

javascript - 使用 js 和 jquery 添加文本链接

javascript - Angular - 从刚刚加载的模板访问 DOM 元素

javascript - 如何获取正确的 X 和 Y 坐标以通过 setDragImage 传递。

javascript - 如何检查是否单击了同一图像或另一图像或图像以外的其他内容

html - 在 div 中仅居中一个元素