How can I add an option to select optgroup in jquery?
I am trying to populate an html select using javascript. Now I just do:
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]);
}
where testSet is a string array. Thus, I have a filled selection. Now I want to update the fill using optgroup, so in my html code I have
<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>
Now to populate my parameters I think I should do something like this
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
}
}
What should I do to "Add testSet [x] to OptionSet"? I've read something on the internet but I can't find anything that seems to work for me.
Thank.
+3
source to share
1 answer
Perhaps this gives you a little idea.
on how to do it
<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>
You can improve the code to make it more meaningful to use.
thank
+2
source to share