CODEWITHSUNDEEP
javascriptjquery
Arti
Arti

Reputation: 3071

Dynamically add options to option group at particular location

I have a small query. I would like to have a HTML select in my page having structure:

<select id="selectedFormulae">
    <option value="0" disabled="" selected="">select</option>
    <optgroup label="Box1">
        <option value="1">Formula1</option>
        <option value="2">Formula2</option>
    </optgroup>
    <optgroup label="Box2?">
        <option value="1">Formula1</option>
        <option value="2">Formula2</option>
        <option value="3">Formula3</option>
    </optgroup>
    <optgroup label="Marital status?">
        <option value="1">Formula1</option>
    </optgroup>
</select>

The options of the select will be added as per what user adds in his computations. My question here is how do I add particular option under particular option group? ie. if user adds another value under box1 then new option should be added under <optgroup label="Box1"> like this:

<optgroup label="Box1">
    <option value="1">Formula1</option>
    <option value="2">Formula2</option>
    <option value="3">Formula3</option>
</optgroup>

Same way if user deleted some value say Formula2 of Box1 then it will have only this:

<optgroup label="Box1">
    <option value="1">Formula1</option>
    <option value="3">Formula2</option>
</optgroup>

I was planning to save all the options in JSON object and then modifying the select html as per what user adds in. Any help with this?

I tried adding it to jsonobject like this:

var opt = {
    Box1:[
        {name:"Formula1"},
        {name:"Formula2"}
    ],
    Box2:[
        {name:"Formula1"},
        {name:"Formula2"}
    ],
    Box3:[
        {name:"Formula1"},
        {name:"Formula2"}
    ]
};

Upvotes: 1

Views: 3458

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this: you can use jQuery attribute selector to find a particular option group and append new option to it

$("#selectedFormulae").find('optgroup[label="Box1"]').append('<option>New option</option>');

Here option group with label="Box1" get selected and user can append new option to it, similarly, user can delete option using below code

$("#selectedFormulae").find('optgroup[label="Box1"]').find('option').filter(function(){
    var text = $(this).text();
    return text=='New option'; 
}).remove();

EDIT - to know if an option exists already, use below code

var $optionGroup = $("#selectedFormulae").find('optgroup[label="Box1"]');
var optionLength = $optionGroup.find('option').filter(function(){
    return $(this).text() == "New option";
);

if(optionLength.length < 1) //option does not exist
{
    $optionGroup.append('<option>New option</option>');
}

Upvotes: 3

Shailendra Sharma
Shailendra Sharma

Reputation: 6992

it can be achieve by your jsonobject : 

 var opt = {
        Box1:[
            {name:"Formula1"},
            {name:"Formula2"}
        ],
        Box2:[
            {name:"Formula1"},
            {name:"Formula2"}
        ],
        Box3:[
            {name:"Formula1"},
            {name:"Formula2"}
        ]
    };

    $(function(){
        var $select = $('#mySelect');
        $.each(opt, function(key, value){
            var group = $('<optgroup label="' + key + '" />');
            $.each(value, function(){
                $('<option />').html(this.name).appendTo(group);
            });
            group.appendTo($select);
        });
    });

here the fiddle http://jsfiddle.net/ZP4E9/29/

Upvotes: 1

Related Questions