disable dropdown option using jquery

Question

I need to disable the top option which infact is not an option but just like an instruction for user. I know i can use disabled="disabled" in html but this dropdown is being dynamically populated and so this can only be done using some jquery or javascript. Has anyone done sth like this? This didn't help either:

$("#ctl00_PlaceHolderMain_ctl00_DropDownList1 option[value='Selecet Category']").attr("disabled","disabled");

DIDN'T WORK!

<select name="ctl00$PlaceHolderMain$ctl00$DropDownList1" id="ctl00_PlaceHolderMain_ctl00_DropDownList1">
            <option value="Select Category">Select Category</option>
            <option value="All Categories">All Categories</option>
            <option value="Cancer">Cancer</option>
            <option value="Health Lecture">Health Lecture</option>
            <option value="Heart Health">Heart Health</option>
    </select>

As far as I know. You can disable the html select, but not the options. What should happen when the user selects that option? Do you want the selection to be rejected and stay on previous selection? That is possible. — Selvakumar Arumugam, Jan 06 '12 at 03:13
Duplicate of http://stackoverflow.com/questions/4944269/jquery-disable-option-in-dropdown -> Instead of alert use e.preventDefault(); — Selvakumar Arumugam, Jan 06 '12 at 03:15
Why do you need to disable it? A typical pattern is just to not give it a value and if you want to perform validation on the input element, check if a value has been selected. — kinakuta, Jan 06 '12 at 03:15
look at this post also http://stackoverflow.com/questions/5805059/select-placeholder — jaychapani, Jan 06 '12 at 04:06

score 1 · Answer 1 · answered Jan 06 '12 at 03:14

1

When the user submits the pages. Check if the value is set.

Don't allow the form to submit if it is

$('form').submit(function (e) {
    if ($('select option:selected').val() === 'Select Category') 
       e.preventDefault();

});

answered Jan 06 '12 at 03:14

Trevor

10,791
2
31
40

score 0 · Answer 2 · edited May 23 '17 at 12:03

See this question: Jquery Disable option in dropdown

You could do that by an event that simply unselects it whenever the user selects the top one.

edit:

Also check out these links for some more information on disabling options and the perils with it, not sure if anything has changed since they were posted though: http://www.lattimore.id.au/2005/06/18/disable-options-in-a-select-dropdown-element/ http://www.lattimore.id.au/2005/07/01/select-option-disabled-and-the-javascript-solution/

disable dropdown option using jquery

2 Answers2