隐藏当前选择菜单并显示其上方的隐藏输入

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>