Disable Select Box Option

Written by Robert Crowder

Monday, February 22, 2010 at 06:34 PM

On a recent project I set up a store for a new shirt company. When I added all the colors then added Long Sleeve and Short Sleeve options. The company told me that they don't offer Royal in Long Sleeve. So here is my solution to disable the Royal option when the Long Sleeve Option is selected. You can see it in action here : EXAMPLEor below.


window.addEvent('domready', function() {

    var royal = $(' Color_field').getElement('option[value=Royal]');
    $(' Style_field').addEvent('change', function(){
       
        
       myStyle = $(' Style_field').value;
       
        
        if(myStyle == "Long_Sleeve"){
 
            royal.setAttribute('disabled',true);
 
        }else{
        
           royal.removeAttribute('disabled');
        
        }
    });
});

Here is the example

On the other hand If you just want to remove that option all together. Just changes the code a tiny bit = line 12. You can see it in action here : EXAMPLE


window.addEvent('domready', function() {

    var royal = $('Color_field').getElement('option[value=Royal]');
    $('Style_field').addEvent('change', function(){
       
        
       myStyle = $('Style_field').value;
       
        
        if(myStyle == "Long_Sleeve"){
            
            $('Color_field').options[9] = null;//REMOVE THAT UNWANTED OPTION
 
        }else{
        
           //ADD THAT OPTION BACK TO THE SELECT DROPDOWN
           var myElement = new Element('option',{'value':'Royal'});
           myElement.injectInside($('Color_field'));
           myElement.appendText('Royal');

           
        }
    });
});

And of course you can make just one line of code out of lines 17 - 19 with a chain like so.


(new Element('option',{'value':'Royal'})).injectInside($('Color_field')).appendText('Royal');