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，但不会将文本选项更改回默认值 - 选择 -

http://jsfiddle.net/EwpXp/

Answer 1

您正在重置值，但不会更改选择，因此选择不会自行更改。考虑类似的事情：

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

Answer 2

首先，我已经删除了所有其他脚本（验证和模板）的小提琴：

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

好的形式导致明确的形式问题

2 个答案: