Fatal编程技术网
  • javascript/
  • Javascript 如何在jquery中添加选择optgroup的选项？

Javascript 如何在jquery中添加选择optgroup的选项？

javascript jquery html select

Javascript 如何在jquery中添加选择optgroup的选项？,javascript,jquery,html,select,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 < testS

我正在尝试用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]);
}

函数addRow（selectID，testName）{
var x=document.getElementById（selectID）；
var option=document.createElement（“选项”）；
option.text=testName；
x、 添加（选项）；
}    
对于（var x=0；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
    }
}

for（var x=0；x
我必须做什么才能“在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>


.覆盖{
背景色：rgba（0,0,0,0.5）；
宽度：100%；
身高：100%
}
//创建一个选项，该选项的键名与optgroup的id有关
//并将其值设置为带有选项列表的数组
变量选项={
“optgroup1”：新数组（'red'、'blue'、'red'），
“optgroup2”：新数组（'thin'、'thick'），
“optgroup3”：新数组（“铅笔”、“圆珠笔”）
};
$（文档）.ready（函数（）{
//循环创建的所有选项
对于（选项中的var i）{
//获得价值
var元素=期权[i]；
//获取optgroup以插入新选项
var parentgroup=$（'#'+i）；
//迭代并向optgroup插入新选项
对于（var j=0；j
您可以改进代码，使其对您的使用更有意义

谢谢

您发布的任何代码中都没有jQuery。标记问题的目的是什么（除非您接受基于jQuery的解决方案，您仍然需要在问题中提及它），这是有效的，谢谢。我不得不修改我的阵列以适应您的解决方案，但现在它工作得很好。