漂亮的表格导致清晰的表格问题

Question

由于某种原因，在我的表单上，当它清除字段时，它会将下拉列表的值重置为“”，但它不显示选项的实际文本？有什么想法吗？

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

编辑：

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

编辑2：

我不知道是什么导致了这个问题，无论是好的表单还是jQuery表单验证插件还是什么，因为单击重置按钮后我知道使用此代码：

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

我有一些下拉菜单和表单重置它会重置所有表单字段的值，甚至下拉列表的值，但下拉列表的文本仍与用户上次更改的内容相同。有谁知道使选择刷新以使其初始选项成为默认选项的解决方案？

编辑3：

来自任何人的任何想法，因为我已经被这个问题困扰了几天了。

编辑4：

希望我能找到至少有一个想法的人！

编辑5：

这是一个js小提琴，它可以完成我正在谈论的事情。它将下拉列表的值重置为0，但不会将文本选项更改回默认值 - Select -

http://jsfiddle.net/EwpXp/

Answer 1

首先，我删除了您的小提琴所有附加脚本（验证和模板）：

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

接下来，我修补了重置功能以与 Niceforms select 一起使用：

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

Niceforms 如何工作？

这个想法很简单：由于普通输入字段（包括单选按钮、复选框、文本区域等）只能在很小程度上设置样式，因此必须隐藏它们，并将其视觉外观替换为类似的工作、新的、完全可定制的结构。从理论上讲，这听起来并不复杂。但从理论到实践还有很长的路要走。

如何处理选择

<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>

当触发表单重置时，所有 html 输入都会重置，但 Niceforms 会使用 div 复制选择。因此，我已将选项中的值复制到 Niceforms div 中（重置后）。我的代码：

$('#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');
    });
});

编辑

考虑后，还有其他方法-您可以重新加载Niceforms。但它是有代价的——形式闪烁

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

Answer 2

您正在重置值，但没有更改选择，因此显然选择不会自行更改。
考虑这样的事情：

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