隱藏當前選擇菜單並顯示其上方的隱藏輸入

Question

我正在使用javascript爲表單創建動態輸入。我有一個問題是，當有人選擇下拉到沒有那麼隱藏的元素應該需要ATTR和當前選擇下拉列表顯示應該是hidden.So到目前爲止，這是我的代碼：

<div id="work"> 
       <div class="form boxed "> 
        <a href="#" class="close-form remove-box button"><i class="fa fa-close"></i></a> 
        <input class="search-field" type="text" placeholder="Job Title" maxlength="100" /> 
        <input class="search-field" type="text" placeholder="Company Name" maxlength="255" /> 
        <input class="search-field" type="text" placeholder="Location" value=""/> 
        <input type="text" class="datepicker-here" data-language="en" data-min-view="months" data-view="months" data-date-format="MM yyyy" placeholder="Enter Start Date" /> 
        <input type="text" class="datepicker-here" data-language="en" data-min-view="months" data-view="months" data-date-format="MM yyyy" placeholder="Enter End Date" style="display: none" /> 

        <label>Are you still working ?</label> 
        <select style="padding: 12px" required onchange="yesnoCheck(this);"> 
         <option value="">Select Option</option> 
         <option value="Present">Yes</option> 
         <option value="No">No</option> 
        </select> 


       </div>   
      </div> 
<a href="javascript:void(0)" onClick="addInput2('work');" class="button gray "><i class="fa fa-plus-circle"></i> Add More</a> 

這是javascript函數即創建動態輸入：

function addInput2(divName){ 
    var newdiv = document.createElement('div'); 
    newdiv.innerHTML = "<div class='form boxed '> 
     <a href='#' class='close-form remove-box button'><i class='fa fa-close'></i></a> 
     <input class='search-field' type='text' placeholder='Job Title' value='' maxlength='100' /> 
     <input class='search-field' type='text' placeholder='Company Name' maxlength='255' /> 
     <input class='search-field' type='text' placeholder='Location' value=''/> 
     <input type='text' class='datepicker-here' data-language='en' data-min-view='months' data-view='months' data-date-format='MM yyyy' placeholder='Enter Start Date' /> 
     <input type='text' class='datepicker-here' data-language='en' data-min-view='months' data-view='months' data-date-format='MM yyyy' style='display: none' placeholder='Enter End Date' /> 
     <label>Are you still working ?</label> 
     <select style='padding: 12px' required onchange=''> 
       <option value=''>Select Option</option> 
       <option value='Present'>Yes</option> 
       <option value='No'>No</option> 
     </select> 
</div>"; 

document.getElementById(divName).appendChild(newdiv); 
} 

這是應該做的工作中的作用，到目前爲止我能夠獲得當前選定的值

function yesnoCheck(that) { 
     if (that.value == "No") { 

     } else { 

     } 
    } 

Answer 1

首先，您需要唯一標識每個出現的select和隱藏的input，以便您可以與它們進行交互。

因此，我在addInput2()函數之外放置了一個變量jubNum，並在每次調用函數時增加它。使用此變量，您可以爲需要彼此交互的元素分配唯一的id。

一旦你可以唯一地標識有問題的select，和有關input，您可以使用display = block展現input，並required = true給它required屬性。

var jobNum = 1; 
 
function addInput2(divName){ 
 
    var newdiv = document.createElement('div'); 
 
    newdiv.innerHTML = "<div class='form boxed'><a href='#' class='close-form remove-box button'><i class='fa fa-close'></i></a><input class='search-field' type='text' placeholder='Job Title' value='' maxlength='100' /> <input class='search-field' type='text' placeholder='Company Name' maxlength='255' /><input class='search-field' type='text' placeholder='Location' value=''/><input type='text' class='datepicker-here' data-language='en' data-min-view='months' data-view='months' data-date-format='MM yyyy' placeholder='Enter Start Date' /><input id='job"+jobNum+"end' type='text' class='datepicker-here' data-language='en' data-min-view='months' data-view='months' data-date-format='MM yyyy' style='display: none' placeholder='Enter End Date' /><label>Are you still working ?</label><select id='job"+jobNum+"' style='padding: 12px' required onchange='yesnoCheck(this);'><option value=''>Select Option</option><option value='Present'>Yes</option><option value='No'>No</option></select></div>"; 
 

 
jobNum++; 
 

 
document.getElementById(divName).appendChild(newdiv); 
 
} 
 

 

 
function yesnoCheck(that) { 
 
     if (that.value == "No") { 
 
      document.getElementById(that.id + 'end').style.display = 'block'; 
 
      document.getElementById(that.id + 'end').required = true; 
 
     } else { 
 
      document.getElementById(that.id + 'end').style.display = 'none'; 
 
      document.getElementById(that.id + 'end').required = false; 
 
     } 
 
    }

<div id="work"> 
 
       <div class="form boxed"> 
 
        <a href="#" class="close-form remove-box button"><i class="fa fa-close"></i></a> 
 
        <input class="search-field" type="text" placeholder="Job Title" maxlength="100" /> 
 
        <input class="search-field" type="text" placeholder="Company Name" maxlength="255" /> 
 
        <input class="search-field" type="text" placeholder="Location" value=""/> 
 
        <input type="text" class="datepicker-here" data-language="en" data-min-view="months" data-view="months" data-date-format="MM yyyy" placeholder="Enter Start Date" /> 
 
        <input id="job0end" type="text" class="datepicker-here" data-language="en" data-min-view="months" data-view="months" data-date-format="MM yyyy" placeholder="Enter End Date" style="display: none" /> 
 

 
        <label class="no">Are you still working ?</label> 
 
        <select id="job0" class="noo" style="padding: 12px" required onchange="yesnoCheck(this);"> 
 
         <option value="">Select Option</option> 
 
         <option value="Present">Yes</option> 
 
         <option value="No">No</option> 
 
        </select> 
 

 

 
       </div>   
 
      </div> 
 
<a href="javascript:void(0)" onClick="addInput2('work');" class="button gray "><i class="fa fa-plus-circle"></i> Add More</a>