重置具有選定選項的選擇輸入

Question

我通過回答here的另一個問題提供了以下代碼。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).on('change', '#no_cage', function() { 
    if(this.checked) { 
     document.getElementById("client").reset(); 
     this.checked = true; 
    } 
}); 
</script> 
<form id="client"> 
    <input type="text"> 
    <input id="no_cage" type="checkbox" value="1"> CLEAR 
</form> 

我現在要包括選擇輸入按照以下幾點：

<select name="cage_labor"> 
    <option value="Select Labor" <?php if ($cage_labor=="Select Labor") echo "selected"; ?>>Select Labor</option> 
    <option value="Non Union" <?php if ($cage_labor=="Non Union") echo "selected"; ?>>Non Union</option> 
    <option value="Union" <?php if ($cage_labor=="Union") echo "selected"; ?>>Union</option> 
</select> 

我想重置表單複選框忽略所選擇的選項，並默認爲「選擇勞動」。任何想法如何實現這一目標？

感謝，

約翰

Answer 1

我得到你真正想要的混淆。

如果你想忽略屬性selected並設置爲默認值：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).on('change', '#no_cage', function() { 
    if(this.checked) { 
     document.getElementById("client").reset(); 
     this.checked = true; 
     $("#cage_labor").prop("selectedIndex",0); 
    } 
}); 
</script> 
<form id="client"> 
    <input type="text"> 
    <select name="cage_labor" id="cage_labor"> 
     <option value="Select Labor">Select Labor</option> 
     <option value="Non Union" selected>Non Union</option> 
     <option value="Union">Union</option> 
    </select> 
    <input id="no_cage" type="checkbox" value="1"> CLEAR 
</form> 

如果你想忽略整個選擇輸入：

當一個表單復位，它重置的一切有。就像你已經完成this.checked = true重新賦值給複選框一樣;爲了使它看起來像重置按鈕忽略了選擇，您只需將該選擇輸入的值分配給變量，並在重置完成後重新分配值以選擇輸入。類似這樣的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).on('change', '#no_cage', function() { 
    if(this.checked) { 
     var value = $("#cage_labor").prop("selectedIndex"); 
     document.getElementById("client").reset(); 
     this.checked = true; 
     $("#cage_labor").prop("selectedIndex",value); 
    } 
}); 
</script> 
<form id="client"> 
    <input type="text"> 
    <select name="cage_labor" id="cage_labor"> 
     <option value="Select Labor">Select Labor</option> 
     <option value="Non Union" selected>Non Union</option> 
     <option value="Union">Union</option> 
    </select> 
    <input id="no_cage" type="checkbox" value="1"> CLEAR 
</form>