Question

我正在使用javascript创建表单的动态输入。我遇到的问题是，当有人选择下拉菜单时，隐藏的元素应显示所需的attr，并且当前的选择下拉列表应该被隐藏。到目前为止这是我的代码：

    <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的每一个匹配项，以便您可以与它们进行互动。

出于这个原因，我在jubNum函数之外放置了一个变量addInput2()，并在每次调用函数时递增它。使用此变量，您可以为需要互相交互的元素分配唯一的id。

一旦您能够唯一地识别相关的select以及相关的input，您就可以使用display = block来展示input和required = true给它required属性。

＆＃13;

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;
        }
    }

＆＃13;

<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>

＆＃13;

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

1 个答案: