Jquery - hiding elements depending on a select value

[eluser]richzilla[/eluser]
Hi all,

Im having a bit of a problem getting the following code snippet to work. Basically the div 'extraUnitPrice' should not be visible if the value of the 'extraType' select box is 'fp'. At present it doesnt do anything at all... can anyone tell me where im going wrong?

Code:

Code:

<label for="extra_type">Extra type: </label>
        <select name="extra_type" id="extraType">
            <option value="fp">Fixed Price / One Off</option>
            <option value="var">Variable</option>
        </select>


<div id="extraUnitPrice">
        &lt;?php echo form_error('unitprice'); ?&gt;
        <label for="unitprice">Unit Price (&pound;): </label>
        &lt;input type="text" name="unitprice" value="&lt;?php echo set_value('unitprice'); ?&gt;" /&gt;
    </div>


[removed]

    $(document).ready(function(){
        $("#extraType").blur(function(){
           if($("#extraType").val() == 'fp')
           {
               $("#extraUnitPrice").hide();
           }
           else
           {
               $("#extraUnitPrice").show();
           }
        });
    });

[removed]

Thanks for any assistance

[eluser]Mareshal[/eluser]
I'll give you ONLY the idea, and how do I do it, because I had same problem.

check this code:

Code:

<select name="theme_switcher" class="select">

If from forum's footer. on changing the theme

[eluser]pickupman[/eluser]
Try

Code:

var select = $("#extraType:selected").val();
if(select == 'fp')

Or depending on your version of jQuery

Code:

var select = $("#extraType option:selected").val();
if(select == 'fp')