输入类型重置按钮没有完美清除表单

Question

这是我的代码：

            <form name="f1" method="get">
        <r><label for="wlk_logo_align">Logo Alignment</label><br/>
<div class="leftdropdown leftdropdown-dark">
        <select id="select1" name="s1" class="leftdropdown-select" >
        <option value="default" selected="selected">Default
        <option value="http://www.java2s.com">Java2s.com
        <option value="http://www.google.com">Google
        <option value="http://www.msn.com">msn
        <option value="http://www.perl.com">Perl.com
        <option value="http://www.php.net">Php.net
        </select>
        </div>
        </r>
        <r><label for="wlk_logo_align">Color Scheme</label><br/>
 <div class="leftdropdown leftdropdown-dark">
        <select id="select2" name="s2"  class="leftdropdown-select">
        <option value="default" selected="selected">Default
        <option value="http://www.1.com">1
        <option value="http://www.2.com">2
        <option value="http://www.3.com">3
        <option value="http://www.4.com">4
        <option value="http://www.5.net">5
</select>
</div>
<INPUT type="button" name="go" value="s1 button"  onClick="window.location=document.f1.s1.options[document.f1.s1.selectedIndex].value">
<INPUT type="button" name="go" value="s2 button"  onClick="window.location=document.f1.s2.options[document.f1.s2.selectedIndex].value">
<button type="reset" class="right" onclick="document.forms['f1'].reset();">Reset</button>

如您所见，我必须使用两个按钮和一个重置按钮。

我需要一个正确的代码，我只使用一个按钮，它适用于两者，重置按钮将清除它们。

这里是jquery代码：

$('#select1').on('change', function(){
if($(this).val() != 'default'){
    $('#select2').prop('disabled', true);
}
else{
    $('#select2').prop('disabled', false);
}

});

$('#select2').on('change', function(){
if($(this).val() != 'default'){
    $('#select1').prop('disabled', true);
}
else{
    $('#select1').prop('disabled', false);
}

});

有关详细信息，如果您从第一个列表中选择 Google 项目，然后尝试使用重置按钮，但是两个下拉菜单都将设置为默认值，但其中一个仍然被禁用。

我需要一个代码来完美地重置这两个项目，以及一个对它们都有效的按钮，因为我必须为这两个项目使用两个按钮。

我真的很适合你在这个问题上的帮助。

问候

Answer 1

试一试：

$('#go').on('click',function() {
    var whichSelect = $('select:enabled');
    if(whichSelect.length===1) {
        alert('Let\'s go to: ' + whichSelect.get(0).value);
        window.location.href=whichSelect.get(0).value;
    } else {
        alert('You have to select at least one select dropdown!');
    }
});

$('#select1').on('change', function(){
if($(this).val() != 'default'){
    $('#select2').prop('disabled', true);
}
else{
    $('#select2').removeAttr('disabled');
}
});

$('#select2').on('change', function(){
if($(this).val() != 'default'){
    $('#select1').prop('disabled', true);
}
else{
    $('#select1').removeAttr('disabled');
}
});

$("button[type='reset']").on("click", function(e) {
    e.preventDefault();
    // Remove the disabled attribute on reset
    $('#select1,#select2').removeAttr('disabled');

    // Fire off the native reset function
    $(this).closest('form').get(0).reset();
});

还有一些新的 html：

<form name="f1" method="get">
    <label for="wlk_logo_align">Logo Alignment</label><br>
    <div class="leftdropdown leftdropdown-dark">
        <select id="select1" name="s1" class="leftdropdown-select" >
            <option value="default" selected="selected">Default
            <option value="http://www.java2s.com">Java2s.com
            <option value="http://www.google.com">Google
            <option value="http://www.msn.com">msn
            <option value="http://www.perl.com">Perl.com
            <option value="http://www.php.net">Php.net
        </select>
    </div>
    <label for="wlk_logo_align">Color Scheme</label><br/>
    <div class="leftdropdown leftdropdown-dark">
        <select id="select2" name="s2"  class="leftdropdown-select">
            <option value="default" selected="selected">Default
            <option value="http://www.1.com">1
            <option value="http://www.2.com">2
            <option value="http://www.3.com">3
            <option value="http://www.4.com">4
            <option value="http://www.5.net">5
        </select>
    </div>
<input type="button" name="go" id="go" value="Go Button">
<button type="reset" class="right">Reset</button>

在小提琴中： http://jsfiddle.net/dk01/B3h9s/

这里的关键是确保您确实从选择元素中删除了 disabled 属性。仅将其设置为 false 是不够的。根据规范，只要属性存在，任何值或没有值都会禁用元素。您还需要确保在重置表单时，从选择框中删除所有禁用的属性。 javascript 的 reset() 函数只会将表单的值重置为默认值，它不会重置您可能修改过的属性，包括 disabled 属性。

此外，请注意，通常最好避免使用 onclick 属性，因为您甚至可能希望在单击时发生多个事件。而是使用 jquery on('click') 函数。