CODEWITHSUNDEEP
javascripthtmlselectoptgroup
Passionate Engineer
Passionate Engineer

Reputation: 10412

How to select optgroup

Is there a way to select optgroup?

It seems to be disabled all the time. I have tried searching for javascript solutions but could not find any good ones.

Upvotes: 0

Views: 2727

Answers (3)

Lloyd Banks
Lloyd Banks

Reputation: 36649

Unfortunately, there is no way to do this inside the native HTML SELECT element. There's also no way to style options inside of a SELECT element, so you can't just use options and make some of them look like optgroups.

You'll have to come up with a work around using a combination of A and UL elements. Here's a basic one using the below HTML:

<div>
    Select
    <ul>
        <li class = "group">
            <a href = "#">
                Foods
            </a>
        </li>
        <li class = "choice">
            <a href = "#">
                Hamburer
            </a>
        </li>
        <li class = "choice">
            <a href = "#">
                Hotdog
            </a>
        </li>
    </ul>
</div>

Fiddle here

Upvotes: 1

Ryan Miller
Ryan Miller

Reputation: 1053

A simple 

document.getElementById

should suffice. See the JSFiddle I cooked up for you!

var optGroup = document.getElementById('myOptGroup')
optGroup.innerHTML = "<option value='saab'>Saab</option>"

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Well you can have an example here: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

Its just more like a tag, to tell about the options below. Or just like a caption.

If you want to select multiple ones then you might use jQuery created select. I mean a custom one, or you can use checkboxes and merge them in a list as a select tag.

There is no other way to select two options from one select element. Each select must have one and only one value.

Other way is to add the value to each option, and then seperate them using ,. But there is no option to select optgroup Its just a way to group the options under it or more like a label to them.

I am getting a warning alert that I am missing a point, do you want to click on the optgroup and select a value under it? I think this might be the condition!

Upvotes: 0

Related Questions