變更表內容的下拉LIS

Question

這就是我的工作：

<form name="leave" method="post" action="lins.jsp" onSubmit="chk();"> 
<center> 
<p>Leave Type: <select id="myl" name="Type"> 
    <option> </option> 
    <option>Casual</option> 
    <option>Extended</option> 
    <option>Medical/Sick</option> 
</select>  
<p>Start Date: <input type="text" id="datepicker" name="dt"></p> 
<p>End Date: <input type="text" id="datepicker2" name="edt"></p> 
<input type="submit" value="Submit" name="subm" /> 
<input type="reset" value="Clear" name="clr" /> 
</center> 
</form> ` 

有什麼辦法來顯示一組額外的按鈕選擇醫療選項時（基本上上傳一個文件）（沒有指向一個新的頁面）？

Answer 1

您可以通過使用JQuery實現這一目標：

<script type="text/javascript"> 
    function showBtn(ele) 
    { 
    if($(ele).val() == "medical"){ 
     $("#uploadFile").show(); 
     } 
    else{ 
     $("#uploadFile").hide(); 
     } 
    } 
</script> 

HTML代碼：

<form name="leave" method="post" action="lins.jsp" onSubmit="chk();"> 
<center> 
    <p>Leave Type: <select id="myl" name="Type" onchange="showBtn(this)"> 
         <option> </option> 
         <option value="casual">Casual</option> 
         <option value="extended">Extended</option> 
         <option value="medical">Medical/Sick</option> 
        </select>  
    <p>Start Date: <input type="text" id="datepicker" name="dt"></p> 
    <p>End Date: <input type="text" id="datepicker2" name="edt"></p> 
    <input type="submit" value="Submit" name="subm" /> 
    <input type="reset" value="Clear" name="clr" /> 
    <input type="file" value="Upload File" name="file" id="uploadFile" style="display: none;" /> 
</center> 
</form> 

這裏，我已經給定值在下拉菜單中的選項，添加上傳文件按鈕形式，但最初它是隱藏的。我有showBtn(ele)上的onChange下拉事件，在那個功能，我已經提出，如果選擇的選項的值是medical比顯示按鈕，否則隱藏它。

Answer 2

你能證明使用jQuery隱藏/顯示（）事件 創建一個按鈕，

<button id="hideMe">Upload file</button> 

而且下面的jQuery，

$(document).ready(function(){ 
    $("#hideMe").hide(); 
    var selVal=$('#my1').va(); 
    if(selVal=="Medical"){ 
    $("#hideMe").show(); 
    } 
     return false; 
     }); 
    }); 

希望它可以幫助！