輸入型復位按鈕不清除表單完美

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 el中刪除了disabled屬性對此語句。僅僅將它設置爲false是不夠的。根據規範，只要該屬性存在，任何值或無值都將禁用該元素。您還需要確保在重置表單時，從選擇框中刪除所有禁用的屬性。 javascript的reset（）函數只會將表單的值重置爲其默認值，而不會重置以及您可能已修改的屬性（包括disabled屬性）。

此外，請注意，避免使用onclick屬性通常會更好，因爲您甚至可能需要在點擊上發生多個事件。相反，在（'click'）函數上使用jquery。