-1

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

$(':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 fiddle，它可以完成我所说的。它将下拉列表的值重置为 0，但不会将文本选项更改回默认值 - 选择 -

http://jsfiddle.net/EwpXp/

4

2 回答 2

1

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

$notElements = $('input[type="submit"], input[type="hidden"]', '#templatesForm');
$resetable = $('#templatesForm input').not($notElements);
$('input[type="reset"]').click(function() { $resetable.val(""); return false; });
于 2011-08-05T15:11:40.743 回答
1

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

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

接下来，我修补了重置功能以使用 niceforms 选择：

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');
});
于 2011-08-06T01:57:49.697 回答