Question

I have two select option field.

<div style="float:left; width:7%">
<label>Type</label>             
<select name="ostatus" id="ostatus" class="input-small">
<option value="Actual">Actual</option>
<option value="Ghost">Ghost</option>
</select>


<div style="float:left; width:7%">
<label>Upgrade</label>              
<select name="oupg" id="oupg" class="input-small">
<option value="Exp" >Exp</option>
<option value="Post" >Post</option>
<option value="Upgrade" >Upg</option>
<option value="Retail" >Retail</option>
<option value="Prepaid" >Prepaid</option>
</select>

If on the Type select, Ghost is selected, I would like to hide option Retail and Prepaid under the upgrade options. How do I go about this? I am able to hide the whole div container for upgrade but I only want to hide those last two options. Please some assistance would be appreciated.

Answer 1

You can use jquery

$(document).ready(function(){
    $('#ostatus').on('change',function() {
        if($(this).val()== 'Ghost'){
          $('#oupg') .find ("option[value=Retail]").hide();
           $('#oupg') .find ("option[value=Prepaid]").hide();
        }
        else{
            $('#oupg') .find ("option[value=Retail]").show();
           $('#oupg') .find ("option[value=Prepaid]").show();
        }
    });
});