CODEWITHSUNDEEP
jquery
Mihai Labo
Mihai Labo

Reputation: 1082

Make Value in Dropdownlist not selectable

I've created a dropdownlist that looks somewhat like this : 

Item1
     Item2
     Item3
Item4
     Item5
     Item6
     Item7

I would like to make Item1 and Item4 as non selectable items. Is this possible with Jquery?
LaterEdit: I should be able to select item1 and item4 (events) through my class called fooheader and rest of the selectable items are called by fooDetails class.

At the moment my temporary fix makes the next value from the Dll the selected value , but I'm looking for a more elegant solution to the issue

Upvotes: 0

Views: 2297

Answers (3)

Mihai Labo
Mihai Labo

Reputation: 1082

Emm .. I've finnaly finnished this part .. I had some problems with modifying my DDL placing the option to several fields within my dropdown list . This is my solution, maybe it helps someone else ( and gets me some extra upvotes in the process :P )


 var $groups = $("#ddlId").filter(function () {
        return $(this).css('color') == 'rgb(0, 0, 0)'; // your condition of finding the optgroup elements 
    });
    $groups.each(function () {
        var $this = $(this);
        $this.nextUntil($groups).wrapAll($("<optgroup>", {
            label: $this.text()
        })).end().remove();
    });

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26163

You should use <optgroup>...

<select>
  <optgroup label="Item 1">
    <option>Item 2</option>
    <option>Item 3</option>
  </optgroup>
  <optgroup label="Item 4">
    <option>Item 5</option>
    <option>Item 6</option>
    <option>Item 7</option>
  </optgroup>
</select>

Here's a jsFiddle...

http://jsfiddle.net/DKLwv/

If you don't want them nested, do it like this...

<select>
  <optgroup label="Item 1"></optgroup>
  <option>Item 2</option>
  <option>Item 3</option>
  <optgroup label="Item 4"></optgroup>
  <option>Item 5</option>
  <option>Item 6</option>
  <option>Item 7</option>
</select>

Upvotes: 5

PSR
PSR

Reputation: 40348

try this

 <select>
<option value="" disabled>---------------------</option>

</select>

Upvotes: 0

Related Questions