Nice forms Causing clear form issue

For some reason on my form when it clears the fields it resets the value of the dropdowns to '' but it does not show the actual text of the option? Any ideas why?

$(':input','#templatesForm')
.not(':submit, :button, :hidden, :reset')
.val('');   

EDIT:

<select size="1" name="status" id="status">
<option value="">- Select -</option>
<?php
echo $statuses;
?>
</select>

Edit 2:

I don't know what is causing this issue whether it be nice forms or the jQuery form validation plugin or what because with the reset button clicked I know use this code:

$("#reset").click(function() {
    validator.resetForm();
});

I have a few dropdowns and with the form reset it resets the values of all form fields even the dropdown however the text of the dropdown remains the same as the user's last change. Does anyone know and solution to make the select refresh so that its initial option is the default option?

Edit 3:

Any ideas from anyone because I've been stumped o开发者_StackOverflow中文版n this for a few days now.

Edit 4:

Hoping I get someone that has atleast one idea!

Edit 5:

Here's a js fiddle that does what I"m talking about. It resets the value of the dropdown to 0 but does not change the text option back to the default of - Select -

http://jsfiddle.net/EwpXp/

First, I've stripped Your fiddle of all additional scripts (validate and template) :

http://jsfiddle.net/Jacek_FH/EwpXp/5/

next, I've patched reset function to work with niceforms select:

http://jsfiddle.net/Jacek_FH/EwpXp/7/

How Does Niceforms Work?

The idea is simple: since normal input fields (including radio buttons, checkboxes, textareas, etc) can only be styled to a small degree, they have to be hidden and their visual appearance replaced with similar working, new, fully customizable constructs. In theory, that doesn't sound really complicated. But from theory to practice there is a long way.

How is select handled

<div class="NFSelect" style="width: 80px; left: 140px; top: 77px; z-index: 999;">
    <img class="NFSelectLeft" src="img/0.png">
    <div class="NFSelectRight">- Select -</div>
    <div class="NFSelectTarget" style="display: none;">
        <ul class="NFSelectOptions">
            <li><a href="javascript:;" class="NFOptionActive">- Select -</a></li>
            <li><a href="javascript:;">Active</a></li>
            <li><a href="javascript:;">Inactive</a></li>
        </ul>
    </div>
</div>
<select id="status" class="NFhidden" name="status" size="1">
    <option selected="selected" value="">- Select -</option>
    <option value="Active">Active</option>
    <option value="Inactive">Inactive</option>
</select>

When reset on form is triggered, all html inputs are reset, but Niceforms duplicate select with divs. So I've copied value from option into Niceforms div (after reset). My code:

$('#reset').click(function(){
    // reset form
    $(':input','#templatesForm')
    .not(':submit, :button, :hidden, :reset')
    .val('');
    // update select
    $('select').each(function(){
        var option = $('option:selected', this).html();
        var niceselect = $(this).parents('dd').find('.NFSelectRight');
        niceselect.html(option);
        $(this).parents('dd')
            .find('.NFSelectTarget a')
            .removeClass('NFOptionActive')
            .filter(':first').addClass('NFOptionActive');
    });
});

edit

after considering, there is also other way - you could reload Niceforms. But it has a price - form blinks

$('#reset').click(function(){
    // reset form
    $(':input','#templatesForm')
    .not(':submit, :button, :hidden, :reset')
    .val('');
    // reload niceforms
    NFDo('stop');
    NFDo('start');
});

You are resetting the values, but not changing the selection, so obvoiusly the selection won't change on its own. Consider something like:

$notElements = $('input[type="submit"], input[type="hidden"]', '#templatesForm');
$resetable = $('#templatesForm input').not($notElements);
$('input[type="reset"]').click(function() { $resetable.val(""); return false; });