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/

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

此外，请注意，通常最好避免使用onclick属性，因为甚至可能有多个事件要发生在点击上。相反，使用jquery on（'click'）函数。

输入类型重置按钮不完全清除表格

1 个答案: