how to disable an option with msdropdown plugin

Question

Is it possible to disable an option after creating a msDropdown plugin?

I explain my problem better. I want to put html into each option with icons, text and some other stuff, so first i create an empty select then I add each option with the add function:

dropdown.add({text:$price.html(), value:'normal', className:'normal'});

The problem is that if a certain condition happen I have to disable one option, but there are no way to set an option disabled by using plugin settings.

There is the possibility to make an option disabled only by setting the related parameter disabled=disabled into the select before to call the msDropdown function, but I can't use this solution since I have to put dinamically html into option text.

Is there another way to do it?

Thank you for your help.

What do you mean by "msdropdown plugin"? Is there some sort of proprietary Microsoft plugin you're referring to? — j08691, Feb 15 '13 at 17:13
No, I think he means this plugin: http://www.marghoobsuleman.com/jquery-image-dropdown — Irvin Dominin, Feb 15 '13 at 17:18
Exaclty, I mean [marghoobsuleman.com/jquery-image-dropdown](http://marghoobsuleman.com/jquery-image-dropdown). Excuse me if I didn't said it before. I edited my answer to be more clear. — Guern, Feb 15 '13 at 18:13
@werner Answer edited; take a look at it; try setting disabled: true property in the add method — Irvin Dominin, Feb 15 '13 at 19:28

Guern · Accepted Answer · 2013-08-07T10:14:25.190

I found a solution.

I create my select empty and I fill each option with add function as before, but when that condition happen just do this:

var dropdown = $('select[name="priceType"]').msDropdown().data("dd");

if(credits_error) { // option must be disabled
    dropdown.destroy(); // Make it a simple select
    $('select[name="priceType"] option').attr('disabled', 'disabled');
    dropdown = $('select[name="priceType"]').msDropdown().data("dd");
}

This way first I make it a simple select by calling destroy function, then I set properly the disabled attribute and I create a new msDropdown select.

It works for me, I tested it on IE, FF and Chrome

Irvin Dominin · Answer 2 · 2013-02-15T19:27:20.880

Yes, it is possibile. It can be done by using the disabled property of the option tag:

<select id="payments" name="payments" style="width:250px;">
    <option value="" data-description="Choos your payment gateway">Payment Gateway</option>
    <option value="amex" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Amex-56.png" data-description="My life. My card...">Amex</option>
    <option value="Discover" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Discover-56.png" data-description="It pays to Discover...">Discover</option>
    <option value="Mastercard" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Mastercard-56.png" data-title="For everything else..." data-description="For everything else...">Mastercard</option>
    <option value="cash" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Cash-56.png" data-description="Sorry not available..." disabled="true">Cash on devlivery</option>
    <option value="Visa" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Visa-56.png" data-description="All you need...">Visa</option>
    <option value="Paypal" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Paypal-56.png" data-description="Pay and get paid...">Paypal</option>
</select>

The option 'cash' will be disabled.

Here is a working fiddle: http://jsfiddle.net/NKQRj/1/

EDIT In this second example data are loaded from JSON data using:

$("#payments").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");

to fill the elements.

You can define your options as disabled in your JSON data using disabled: true property:

{image:'http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Cash-56.png', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},

here is a working fiddle: http://jsfiddle.net/NKQRj/3/

the problem is more complex. I can change the property _disabled_ from **disabled** to **enabled** dinamically if a condition is verified. In your example i set in json data if it is disabled on not and that's it — Guern, Feb 16 '13 at 02:21
Now is clear; in the question was not clear that the disabling of an option happens at run time. Your final solution is right — Irvin Dominin, Feb 17 '13 at 12:39

how to disable an option with msdropdown plugin

2 Answers2